Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/Status.vue
<template> | <template> | ||||
<div v-if="!state.isReady" id="status-box" :class="'p-4 mb-3 rounded process-' + className"> | <div v-if="!state.isReady" id="status-box" :class="'p-4 mb-3 rounded process-' + className"> | ||||
<div v-if="state.step != 'domain-confirmed'" class="d-flex align-items-start"> | <div v-if="state.step != 'domain-confirmed'" class="d-flex align-items-start"> | ||||
<p id="status-body" class="flex-grow-1"> | <p id="status-body" class="flex-grow-1"> | ||||
<span>{{ $t('status.prepare-' + scopeLabel()) }}</span> | <span>{{ $t('status.prepare-' + scopeLabel()) }}</span> | ||||
<br> | <br> | ||||
{{ $t('status.prepare-hint') }} | {{ $t('status.prepare-hint') }} | ||||
<br> | <br> | ||||
<span id="refresh-text" v-if="refresh">{{ $t('status.prepare-refresh') }}</span> | <span id="refresh-text" v-if="refresh">{{ $t('status.prepare-refresh') }}</span> | ||||
</p> | </p> | ||||
<btn v-if="refresh" id="status-refresh" href="#" class="btn-secondary" @click="statusRefresh" icon="sync-alt"> | <btn v-if="refresh" id="status-refresh" href="#" class="btn-secondary" @click="statusRefresh" icon="rotate"> | ||||
{{ $t('btn.refresh') }} | {{ $t('btn.refresh') }} | ||||
</btn> | </btn> | ||||
</div> | </div> | ||||
<div v-else class="d-flex align-items-start"> | <div v-else class="d-flex align-items-start"> | ||||
<p id="status-body" class="flex-grow-1"> | <p id="status-body" class="flex-grow-1"> | ||||
<span>{{ $t('status.ready-' + scopeLabel()) }}</span> | <span>{{ $t('status.ready-' + scopeLabel()) }}</span> | ||||
<br> | <br> | ||||
{{ $t('status.verify') }} | {{ $t('status.verify') }} | ||||
</p> | </p> | ||||
<div v-if="scope == 'domain'"> | <div v-if="scope == 'domain'"> | ||||
<btn id="status-verify" class="btn-secondary text-nowrap" @click="confirmDomain" icon="sync-alt"> | <btn id="status-verify" class="btn-secondary text-nowrap" @click="confirmDomain" icon="rotate"> | ||||
{{ $t('btn.verify') }} | {{ $t('btn.verify') }} | ||||
</btn> | </btn> | ||||
</div> | </div> | ||||
<div v-else-if="state.link && scope != 'domain'"> | <div v-else-if="state.link && scope != 'domain'"> | ||||
<router-link id="status-link" class="btn btn-secondary" :to="{ path: state.link }">{{ $t('status.verify-domain') }}</router-link> | <router-link id="status-link" class="btn btn-secondary" :to="{ path: state.link }">{{ $t('status.verify-domain') }}</router-link> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="status-progress text-center"> | <div class="status-progress text-center"> | ||||
<div class="progress"> | <div class="progress"> | ||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> | <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> | ||||
</div> | </div> | ||||
<span class="progress-label">{{ state.title || $t('msg.initializing') }}</span> | <span class="progress-label">{{ state.title || $t('msg.initializing') }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { library } from '@fortawesome/fontawesome-svg-core' | |||||
library.add( | |||||
require('@fortawesome/free-solid-svg-icons/faRotate').definition, | |||||
) | |||||
export default { | export default { | ||||
props: { | props: { | ||||
status: { type: Object, default: () => {} } | status: { type: Object, default: () => {} } | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
className: 'pending', | className: 'pending', | ||||
refresh: false, | refresh: false, | ||||
▲ Show 20 Lines • Show All 150 Lines • Show Last 20 Lines |