Merge branch 'dev' into main

ludchieng · Jan 24, 2023 · 6beff49 · 6beff49
2 parents 3b56219 + 2aebf0c
commit 6beff49
Show file tree

Hide file tree

Showing 43 changed files with 1,332 additions and 789 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,6 +5,8 @@ module.exports = {
   },
   extends: [
     'plugin:vue/essential',
+    'plugin:vue/strongly-recommended',
+    'plugin:vue/recommended',
     '@vue/standard',
     '@vue/typescript/recommended',
   ],

diff --git a/public/sw.js b/public/sw.js
@@ -17,10 +17,3 @@ registerRoute(
     cacheName: 'img-mui',
   }),
 )
-
-registerRoute(
-  ({ url }) => url.pathname.startsWith('/schemas/'),
-  new CacheFirst({
-    cacheName: 'schemas',
-  }),
-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <AppHeader />
-    <AppPageView />
+    <AppView />
   </div>
 </template>
 
@@ -10,35 +9,24 @@ import Vue from 'vue'
 import '@fontsource/inter/latin-500.css'
 import '@fontsource/inter/latin-600.css'
 import '@fontsource/inter/latin-700.css'
-import AppHeader from '@/components/AppHeader.vue'
-import AppPageView from '@/components/AppPageView.vue'
+import AppView from '@/components/AppView.vue'
 import { lastUpdatedAt, synchronize } from './utils/localstore/synchronizer'
 
 export default Vue.extend({
   name: 'App',
   components: {
-    AppHeader,
-    AppPageView,
-  },
-  created () {
-    if (!lastUpdatedAt()) {
-      synchronize().then(() => {
-        window.location.href = '/'
-      })
-    }
-    // Ping server to wake it up
-    fetch(process.env.VUE_APP_API_URL)
+    AppView,
   },
   watch: {
     '$route.params.tab': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
         const isValidTabNumber = tabNumber >= 1 && tabNumber <= this.$store.state.tabs.length
         if (!isValidTabNumber) {
-          this.$router.push(`/1/${this.$store.state.tabs[0].path}`)
+          this.$router.push(`/timetables/1/${this.$store.state.tabs[0].path}`)
         }
       },
       deep: true,
@@ -61,21 +49,28 @@ export default Vue.extend({
     },
     '$store.state.tabs': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
         const isValidTabNumber = tabNumber >= 1 && tabNumber <= this.$store.state.tabs.length
         if (!isValidTabNumber) {
           const newTabNumber = Math.min(this.$store.state.tabs.length, Math.max(1, Number(this.$route.params.tab)))
           const { line, stop } = this.$store.state.tabs[newTabNumber - 1]
-          this.$router.push(`/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+          this.$router.push(`/timetables/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
         }
       },
       deep: true,
       immediate: true,
     },
   },
+  created () {
+    if (!lastUpdatedAt()) {
+      synchronize().then(() => {
+        window.location.href = '/'
+      })
+    }
+  },
 })
 </script>
 

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,42 +1,56 @@
 <template>
   <header>
     <div>
-      <router-link v-if="$route.params.line"
+      <router-link
+        v-if="$route.params.line"
         class="icon-line"
-        :to="`/${ $route.params.tab }/${ $route.params.line }`"
+        :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
-      <LineIcon :lineSlugName="$route.params.line" theme="colors" />
+        <LineIcon
+          :line-slug-name="$route.params.line"
+          color="colors"
+          size="md"
+        />
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/${ $route.params.tab }`">
-        <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
+      <router-link
+        class="logo"
+        :to="`/timetables/${ $route.params.tab || '' }`"
+      >
+        <img
+          alt="Logo Alednavigo"
+          src="@/assets/icon-light.png"
+        >
       </router-link>
     </div>
     <div class="clock">
       <div>
-        <TimeClock :datetime="datetime" />
+        <UiClock :time="time" />
       </div>
     </div>
   </header>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import LineIcon from '@/components/Line/Icon.vue'
-import TimeClock from '@/components/TimeClock.vue'
-import { DateTime } from '@/utils/datetime'
+import LineIcon from '@/components/LineIcon.vue'
+import UiClock from '@/components/ui/UiClock.vue'
+import { Time } from '@/utils/time'
 export default Vue.extend({
   name: 'AppHeader',
-  components: { LineIcon, TimeClock },
+  components: {
+    LineIcon,
+    UiClock,
+  },
   data: () => ({
     clockInterval: 0,
-    datetime: {} as DateTime,
+    time: {} as Time,
   }),
   created () {
     this.clockInterval = setInterval(() => {
       const t = new Date()
-      this.datetime = {
+      this.time = {
         hh: t.getHours().toString(),
         mm: t.getMinutes().toString().padStart(2, '0'),
         ss: t.getSeconds().toString().padStart(2, '0'),
@@ -76,11 +90,6 @@ header {
   margin-left: 0.5rem;
 }
 
-.icon-line img {
-  width: 2rem;
-  height: 2rem;
-}
-
 .clock {
   display: flex;
   justify-content: end;

diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
@@ -2,21 +2,37 @@
   <nav>
     <hr>
     <div class="nav-content">
-      <div v-if="showTabsList" class="nav-tabs-list">
+      <div
+        v-if="showTabsList"
+        class="nav-tabs-list"
+      >
         <ul>
-          <li v-for="({ line, stop, path }, i) in $store.state.tabs" :key="`/${i + 1}/${path}`"
+          <li
+            v-for="({ line, stop, path }, i) in $store.state.tabs"
+            :key="`/${i + 1}/${path}`"
             class="tab"
             :class="{ 'tab-active': tabIndex() === i }"
           >
-            <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+            <router-link
+              class="tab-link"
+              :to="`/timetables/${i + 1}/${path}`"
+            >
               <span class="tab-label">
-                <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
-                <span v-if="stop" class="tab-label-text">
+                <LineIcon
+                  :line-slug-name="line"
+                  :color="tabIndex() === i ? 'dark' : 'light'"
+                  size="sm"
+                />
+                <span
+                  v-if="stop"
+                  class="tab-label-text"
+                >
                   {{ getStop(line, stop).displayName }}
                 </span>
               </span>
             </router-link>
-            <button v-if="$store.state.tabs.length > 1"
+            <button
+              v-if="$store.state.tabs.length > 1"
               class="close-tab"
               @click="closeTab(i)"
             >
@@ -27,31 +43,61 @@
       </div>
 
       <div class="nav-controls">
-        <router-link class="to-settings" to="/settings">
-          <img class="icon-settings" src="/img/mui/more-vert.svg" />
+        <router-link
+          class="to-settings"
+          to="/settings"
+        >
+          <img
+            class="icon-settings"
+            src="/img/mui/more-vert.svg"
+          >
         </router-link>
         <div class="tabs-manager">
-          <ul v-if="!showTabsList" class="tabs">
-            <li v-for="({ line, stop, path }, i) in $store.state.tabs" :key="`/${i + 1}/${path}`"
+          <ul
+            v-if="!showTabsList"
+            class="tabs"
+          >
+            <li
+              v-for="({ line, stop, path }, i) in $store.state.tabs"
+              :key="`/${i + 1}/${path}`"
               class="tab"
               :class="{ 'tab-active': tabIndex() === i }"
             >
-              <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+              <router-link
+                class="tab-link"
+                :to="`/timetables/${i + 1}/${path}`"
+              >
                 <span class="tab-label">
-                  <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
-                  <span v-if="stop" class="tab-label-text">
+                  <LineIcon
+                    :line-slug-name="line"
+                    :color="tabIndex() === i ? 'dark' : 'light'"
+                    size="sm"
+                  />
+                  <span
+                    v-if="stop"
+                    class="tab-label-text"
+                  >
                     {{ getStop(line, stop).displayName }}
                   </span>
                 </span>
               </router-link>
             </li>
           </ul>
         </div>
-        <button class="add-tab" @click="addTab()">
+        <button
+          class="add-tab"
+          @click="addTab()"
+        >
           +
         </button>
-        <button class="btn-toggle-tabs-list" @click="showTabsList = !showTabsList">
-          <img class="icon-tabs-list" src="/img/mui/reorder.svg" />
+        <button
+          class="btn-toggle-tabs-list"
+          @click="showTabsList = !showTabsList"
+        >
+          <img
+            class="icon-tabs-list"
+            src="/img/mui/reorder.svg"
+          >
         </button>
       </div>
     </div>
@@ -61,7 +107,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { getStop } from '@/utils/localstore/stops'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 
 export default Vue.extend({
   name: 'AppNav',
@@ -76,18 +122,18 @@ export default Vue.extend({
     },
     addTab () {
       this.$store.commit('addTab')
-      this.$router.push(`/${this.$store.state.tabs.length}`)
+      this.$router.push(`/timetables/${this.$store.state.tabs.length}`)
     },
     closeTab (tabIndex: number) {
       const currentTabIndex = Number(this.$route.params.tab) - 1
       if (currentTabIndex > tabIndex) {
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
         this.$store.commit('closeTab', { tabIndex })
-        this.$router.push(`/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       } else {
         this.$store.commit('closeTab', { tabIndex })
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
-        this.$router.push(`/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       }
     },
   },

diff --git a/src/components/AppPageView.vue → src/components/AppView.vue b/src/components/AppPageView.vue → src/components/AppView.vue
@@ -1,25 +1,23 @@
 <template>
   <div>
+    <AppHeader />
     <div class="tab">
-      <SettingsPage v-if="$route.params.tab === 'settings'" />
-      <TabPage v-else />
+      <router-view />
     </div>
     <AppNav />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import SettingsPage from '@/pages/SettingsPage.vue'
-import TabPage from '@/pages/TabPage/index.vue'
 import AppNav from '@/components/AppNav.vue'
+import AppHeader from '@/components/AppHeader.vue'
 
 export default Vue.extend({
-  name: 'AppPageView',
+  name: 'AppView',
   components: {
+    AppHeader,
     AppNav,
-    SettingsPage,
-    TabPage,
   },
 })
 </script>