new routing (#39)

Author: ilya101master

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "vue-cli-service serve",
+    "start": "vue-cli-service serve --port 9002",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "serve:standalone": "vue-cli-service serve --mode standalone"
@@ -12,10 +12,10 @@
     "click-outside-vue3": "^4.0.1",
     "core-js": "^3.6.5",
     "single-spa-vue": "^2.1.0",
-    "v-calendar": "^3.0.0-alpha.8",
+    "systemjs-webpack-interop": "^2.3.7",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.0-0"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.15",

set-public-path.js

@@ -0,0 +1,3 @@
+import { setPublicPath } from "systemjs-webpack-interop";
+
+setPublicPath("@profcomff/timetable");

src/App.vue

@@ -1,14 +1,6 @@
 <template>
-  <NavBar />
   <router-view />
 </template>
 
 <script>
-import NavBar from '@/components/NavBar.vue'
-export default {
-  components:{
-    NavBar,
-  },
-}
 </script>
-

src/components/NavBar.vue

@@ -1,5 +1,4 @@
 import { h, createApp } from 'vue';
-import { SetupCalendar } from 'v-calendar';
 import singleSpaVue from 'single-spa-vue';
 
 import App from './App.vue';
@@ -18,7 +17,6 @@ const vueLifecycles = singleSpaVue({
   handleInstance(app) {
     app.use(router);
     app.use(store);
-    app.use(SetupCalendar);
   },
 });
 

src/main.js

@@ -19,8 +19,8 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (to.name !== 'Init' && !localStorage.getItem('timetable-group-id')) 
+  if (to.name !== 'Init' && !localStorage.getItem('timetable-group-id') && localStorage.getItem('timetable-group-id') != "-1") 
     next({ name: 'Init' });
   else next();
 })
-export default router
+export default router;

src/router/index.js

@@ -149,5 +149,6 @@ img {
   width: 40%;
   height: auto;
   max-width: 200px;
+  border-radius: 50%;
 }
 </style>

src/views/Init.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="timetable">
     <div v-if="!this.loaded" class="lds-dual-ring"></div>
-    <div v-else class='container'>  
+    <div v-else class='container'>
       <div class='info'>{{ this.groupInfo.number }} группа</div>
       <div class="no-events" v-if="!this.timetable.length">пары отсутствуют</div>
       <ul v-else>
@@ -19,7 +19,6 @@ export default {
 
   mounted() {
     this.groupId = localStorage.getItem('timetable-group-id');
-    this.$store.commit("changePage", this.pageId);
     this.loadGroupInfo();
     this.loadTimetableOnDate(this.$store.state.date);
   },
@@ -28,25 +27,15 @@ export default {
       loaded: true,
       pageId: 1,
       groupId: null,
-      groupInfo: {number:''},
+      groupInfo: { number: '' },
       timetable: [],
     };
   },
-  computed: {
-    choosenDate() {
-      return this.$store.state.date
-    }
-  },
-  watch: {
-    choosenDate(newValue) {
-      this.loadTimetableOnDate(newValue)
-    }
-  },
   components: {
     EventRow: EventRow,
   },
   methods: {
-    loadGroupInfo(){
+    loadGroupInfo() {
       var url = new URL(`${process.env.VUE_APP_API_TIMETABLE}/timetable/group/${this.groupId}`);
       fetch(url).then(response => response.json())
         .then(json => {
@@ -55,17 +44,18 @@ export default {
     },
     loadTimetableOnDate(date) {
       var time_start = new Date(date);
-      time_start.setHours(time_start.getHours() - date.getTimezoneOffset()/60)
+      time_start.setHours(time_start.getHours() - date.getTimezoneOffset() / 60)
       console.log(time_start.toISOString())
       var time_end = new Date(time_start);
       time_end.setDate(time_start.getDate() + 1)
       var url = new URL(`${process.env.VUE_APP_API_TIMETABLE}/timetable/event/`),
-        params = { 
-          start: time_start.toISOString().slice(0, 10), 
+        params = {
+          start: time_start.toISOString().slice(0, 10),
           end: time_end.toISOString().slice(0, 10),
           limit: 0,
           offset: 0,
-          group_id: this.groupId }
+          group_id: this.groupId
+        }
       Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
       this.loaded = false;
       fetch(url).then(response => response.json())
@@ -75,8 +65,13 @@ export default {
         })
 
     }
+  },
+  beforeMount() {
+    document.dispatchEvent(new CustomEvent("change-page", { detail: this.pageId }));
+    document.addEventListener('change-date', (e) => this.loadTimetableOnDate(e.detail));
   }
 };
+
 </script>
 
 <style scoped>
@@ -136,5 +131,4 @@ ul {
   align-self: stretch;
   flex-grow: 0;
 }
-
 </style>

src/views/Settings.vue

@@ -0,0 +1,8 @@
+module.exports = {
+    runtimeCompiler: true,
+    configureWebpack: {
+        output: {
+            libraryTarget: 'system',
+        },
+    },
+};