Начал писать фичу с прелоадером, но vue dev tools не работают
This commit is contained in:
p.belezov
parent
4018fd3334
commit
be218a5fea
|
|
@ -7,6 +7,7 @@
|
|||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"axios": "^1.6.4",
|
||||
"pinia": "^2.1.7",
|
||||
"typescript": "^5.3.3",
|
||||
"vue": "^3.4.14",
|
||||
"vuetify": "^3.4.10"
|
||||
|
|
@ -605,6 +606,11 @@
|
|||
"@vue/shared": "3.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
|
||||
"integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.4.14",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.14.tgz",
|
||||
|
|
@ -906,6 +912,56 @@
|
|||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
|
||||
"integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.5.0",
|
||||
"vue-demi": ">=0.14.5"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.3.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia/node_modules/vue-demi": {
|
||||
"version": "0.14.7",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
|
||||
"integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.33",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"axios": "^1.6.4",
|
||||
"pinia": "^2.1.7",
|
||||
"typescript": "^5.3.3",
|
||||
"vue": "^3.4.14",
|
||||
"vuetify": "^3.4.10"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import {defineStore} from "pinia";
|
||||
|
||||
export const useScheduleStore = defineStore('Schedule', {
|
||||
state: () => ({
|
||||
fetchingDates: true,
|
||||
fetchingTable: true,
|
||||
fetchingLinks: true
|
||||
}),
|
||||
getters: {
|
||||
|
||||
},
|
||||
actions: {
|
||||
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
class=""
|
||||
:model-value="true"
|
||||
width="auto"
|
||||
persistent
|
||||
>
|
||||
<PreloaderWindow/>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PreloaderWindow from "./PreloaderWindow.vue";
|
||||
|
||||
export default {
|
||||
name: "Preloader"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="window glass rounded-lg d-flex flex-column justify-center align-center px-2">
|
||||
<v-progress-linear indeterminate rounded="lg"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PreloaderWindow"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
|
||||
<v-sheet class="mt-5 mb-5 rounded-lg w-75">
|
||||
<p class="text-h3 ma-5">Расписание стримов</p>
|
||||
<p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
|
||||
<ScheduleTable/>
|
||||
<p class="text-h3 ma-5">Ссылочки</p>
|
||||
<Links/>
|
||||
</v-sheet>
|
||||
<v-sheet class="mt-5 mb-5 rounded-lg w-75">
|
||||
<p class="text-h3 ma-5">Расписание стримов</p>
|
||||
<p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
|
||||
<ScheduleTable/>
|
||||
<p class="text-h3 ma-5">Ссылочки</p>
|
||||
<Links/>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
||||
|
|
@ -14,6 +12,7 @@
|
|||
import axios from "axios";
|
||||
import ScheduleTable from "./Schedule/ScheduleTable.vue";
|
||||
import Links from "./Schedule/Links.vue";
|
||||
import {useScheduleStore} from '../stores/Schedule.js';
|
||||
|
||||
export default {
|
||||
name: "Schedule",
|
||||
|
|
@ -30,20 +29,16 @@ export default {
|
|||
mounted() {
|
||||
axios
|
||||
.get('/api/v1/dates')
|
||||
.then(response => (this.dates = response.data));
|
||||
.then(response => {
|
||||
this.dates = response.data;
|
||||
useScheduleStore().fetchingDates = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.bg-gradient {
|
||||
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
|
||||
background-size: 200% 200%;
|
||||
animation: gradient 15s ease infinite;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import {useScheduleStore} from '../../stores/Schedule.js';
|
||||
|
||||
export default {
|
||||
name: "Links",
|
||||
data: () => ({
|
||||
|
|
@ -8,7 +10,10 @@
|
|||
mounted() {
|
||||
axios
|
||||
.get('/api/v1/links')
|
||||
.then(response => (this.links = response.data));
|
||||
.then(response => {
|
||||
this.links = response.data;
|
||||
useScheduleStore().fetchingLinks = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import {useScheduleStore} from '../../stores/Schedule.js';
|
||||
|
||||
export default {
|
||||
name: "ScheduleTable",
|
||||
data: () => ({
|
||||
|
|
@ -14,7 +16,10 @@
|
|||
mounted() {
|
||||
axios
|
||||
.get('/api/v1/schedules')
|
||||
.then(response => (this.schedules = response.data));
|
||||
.then(response => {
|
||||
this.schedules = response.data;
|
||||
useScheduleStore().fetchingTable = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,34 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<Schedule></Schedule>
|
||||
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
|
||||
<Preloader v-if="fetching.value" />
|
||||
<Schedule v-else />
|
||||
</v-sheet>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Schedule from "./Schedule.vue"
|
||||
import Schedule from "./Schedule.vue";
|
||||
import Preloader from "./Preloader/Preloader.vue";
|
||||
import {ref} from "vue";
|
||||
import {useScheduleStore} from '../stores/Schedule.js';
|
||||
|
||||
export default {
|
||||
name: "Welcome",
|
||||
components: {Schedule}
|
||||
components: {Preloader, Schedule},
|
||||
data: () => ({
|
||||
fetching: ref(useScheduleStore().fetchingDates || useScheduleStore().fetchingLinks || useScheduleStore().fetchingTable)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.bg-gradient {
|
||||
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
|
||||
background-size: 200% 200%;
|
||||
animation: gradient 15s ease infinite;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import './js/bootstrap';
|
||||
import {createApp} from 'vue'
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './views/Welcome.vue'
|
||||
import { createVuetify } from 'vuetify'
|
||||
import 'vuetify/styles'
|
||||
|
|
@ -7,9 +8,11 @@ import * as components from 'vuetify/components'
|
|||
import * as directives from 'vuetify/directives'
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
const vuetify = createVuetify({
|
||||
components,
|
||||
directives
|
||||
})
|
||||
});
|
||||
|
||||
createApp(App).use(vuetify).mount("#app")
|
||||
createApp(App).use(vuetify).use(pinia).mount("#app");
|
||||
|
|
|
|||
Loading…
Reference in New Issue