1
0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00
This commit is contained in:
Donald Zou 2024-11-03 19:09:15 +08:00
parent b97fc16ad9
commit c53a7ef6fe
6 changed files with 71 additions and 74 deletions

View File

@ -1 +1 @@
.dropdownIcon[data-v-626f1988]{transition:all .2s ease-in-out}.dropdownIcon.active[data-v-626f1988]{transform:rotate(180deg)}.steps{&[data-v-e5d78cfb]{transition:all .3s ease-in-out;opacity:.3}&.active[data-v-e5d78cfb]{opacity:1}} .dropdownIcon[data-v-626f1988]{transition:all .2s ease-in-out}.dropdownIcon.active[data-v-626f1988]{transform:rotate(180deg)}.steps{&[data-v-452caf5e]{transition:all .3s ease-in-out;opacity:.3}&.active[data-v-452caf5e]{opacity:1}}

File diff suppressed because one or more lines are too long

View File

@ -9,7 +9,7 @@ import {createApp, markRaw} from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router/router.js'
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js"; import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
import {fetchGet} from "@/utilities/fetch.js"; import {fetchGet} from "@/utilities/fetch.js";

View File

@ -1,4 +1,4 @@
import router from "@/router/index.js"; import router from "@/router/router.js";
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js"; import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
const getHeaders = () => { const getHeaders = () => {

View File

@ -29,83 +29,80 @@ const selectedConfiguration = ref("")
<LocaleText t="Restore Configuration"></LocaleText> <LocaleText t="Restore Configuration"></LocaleText>
</h2> </h2>
</div> </div>
<div v-if="backups" > <Transition name="fade" appear>
<div class="d-flex mb-5 align-items-center steps" role="button" <div v-if="backups">
:class="{active: !confirm}" <div class="d-flex mb-5 align-items-center steps" role="button"
@click="confirm = false" key="step1"> :class="{active: !confirm}"
<div class=" d-flex text-decoration-none text-body flex-grow-1 align-items-center gap-3" @click="confirm = false" key="step1">
<div class=" d-flex text-decoration-none text-body flex-grow-1 align-items-center gap-3">
> <h1 class="mb-0"
<h1 class="mb-0" style="line-height: 0">
style="line-height: 0"> <i class="bi bi-1-circle-fill"></i>
<i class="bi bi-1-circle-fill"></i> </h1>
</h1> <div>
<div> <h4 class="mb-0">
<h4 class="mb-0"> <LocaleText t="Step 1"></LocaleText>
<LocaleText t="Step 1"></LocaleText> </h4>
</h4> <small class="text-muted">
<small class="text-muted"> <LocaleText t="Select a backup you want to restore" v-if="!confirm"></LocaleText>
<LocaleText t="Select a backup you want to restore" v-if="!confirm"></LocaleText> <LocaleText t="Click to change a backup" v-else></LocaleText>
<LocaleText t="Click to change a backup" v-else></LocaleText> </small>
</small> </div>
</div> </div>
<Transition name="zoomReversed">
<div class="ms-sm-auto" v-if="confirm">
<small class="text-muted">
<LocaleText t="Selected Backup"></LocaleText>
</small>
<h6>
<samp>{{selectedConfigurationBackup.filename}}</samp>
</h6>
</div>
</Transition>
</div> </div>
<Transition name="zoomReversed"> <div id="step1Detail" v-if="!confirm">
<div class="ms-sm-auto" v-if="confirm"> <div class="mb-4">
<small class="text-muted"> <div class="d-flex gap-3 flex-column">
<LocaleText t="Selected Backup"></LocaleText> <BackupGroup
</small> @select="(b) => {selectedConfigurationBackup = b; selectedConfiguration = c; confirm = true}"
<h6> :selectedConfigurationBackup="selectedConfigurationBackup"
<samp>{{selectedConfigurationBackup.filename}}</samp> :open="selectedConfiguration === c"
</h6> v-for="c in Object.keys(backups.NonExistingConfigurations)"
</div> :configuration-name="c" :backups="backups.NonExistingConfigurations[c]"></BackupGroup>
</Transition> <div v-if="Object.keys(backups.NonExistingConfigurations).length === 0">
</div> <div class="card rounded-3">
<div id="step1Detail" v-if="!confirm"> <div class="card-body">
<div class="mb-4"> <p class="mb-0">
<div class="d-flex gap-3 flex-column"> <LocaleText t="You don't have any configuration to restore"></LocaleText>
<BackupGroup </p>
@select="(b) => {selectedConfigurationBackup = b; selectedConfiguration = c; confirm = true}" </div>
:selectedConfigurationBackup="selectedConfigurationBackup"
:open="selectedConfiguration === c"
v-for="c in Object.keys(backups.NonExistingConfigurations)"
:configuration-name="c" :backups="backups.NonExistingConfigurations[c]"></BackupGroup>
<div v-if="Object.keys(backups.NonExistingConfigurations).length === 0">
<div class="card rounded-3">
<div class="card-body">
<p class="mb-0">
<LocaleText t="You don't have any configuration to restore"></LocaleText>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="my-5" key="step2" id="step2"> <div class="my-5" key="step2" id="step2">
<div class="steps d-flex text-decoration-none text-body flex-grow-1 align-items-center gap-3" <div class="steps d-flex text-decoration-none text-body flex-grow-1 align-items-center gap-3"
:class="{active: confirm}" :class="{active: confirm}"
> >
<h1 class="mb-0" <h1 class="mb-0"
style="line-height: 0"> style="line-height: 0">
<i class="bi bi-2-circle-fill"></i> <i class="bi bi-2-circle-fill"></i>
</h1> </h1>
<div> <div>
<h4 class="mb-0">Step 2</h4> <h4 class="mb-0">Step 2</h4>
<small class="text-muted"> <small class="text-muted">
<LocaleText t="Backup not selected" v-if="!confirm"></LocaleText> <LocaleText t="Backup not selected" v-if="!confirm"></LocaleText>
<LocaleText t="Confirm & edit restore information" v-else></LocaleText> <LocaleText t="Confirm & edit restore information" v-else></LocaleText>
</small> </small>
</div>
</div> </div>
</div> </div>
<ConfirmBackup :selectedConfigurationBackup="selectedConfigurationBackup" v-if="confirm" key="confirm"></ConfirmBackup>
</div> </div>
<ConfirmBackup :selectedConfigurationBackup="selectedConfigurationBackup" v-if="confirm" key="confirm"></ConfirmBackup> </Transition>
</div>
</div> </div>
</div> </div>
</template> </template>