chore: add linter rules

ludchieng · Jan 24, 2023 · c9405fa · c9405fa
1 parent 1890bbb
commit c9405fa
Show file tree

Hide file tree

Showing 23 changed files with 292 additions and 122 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/src/App.vue b/src/App.vue
@@ -17,13 +17,6 @@ export default Vue.extend({
   components: {
     AppView,
   },
-  created () {
-    if (!lastUpdatedAt()) {
-      synchronize().then(() => {
-        window.location.href = '/'
-      })
-    }
-  },
   watch: {
     '$route.params.tab': {
       handler () {
@@ -71,6 +64,13 @@ export default Vue.extend({
       immediate: true,
     },
   },
+  created () {
+    if (!lastUpdatedAt()) {
+      synchronize().then(() => {
+        window.location.href = '/'
+      })
+    }
+  },
 })
 </script>
 

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,20 +1,27 @@
 <template>
   <header>
     <div>
-      <router-link v-if="$route.params.line"
+      <router-link
+        v-if="$route.params.line"
         class="icon-line"
         :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
-      <LineIcon
-        :lineSlugName="$route.params.line"
-        color="colors"
-        size="md"
-      />
+        <LineIcon
+          :line-slug-name="$route.params.line"
+          color="colors"
+          size="md"
+        />
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/timetables/${ $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">

diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
@@ -2,25 +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="`/timetables/${i + 1}/${path}`">
+            <router-link
+              class="tab-link"
+              :to="`/timetables/${i + 1}/${path}`"
+            >
               <span class="tab-label">
                 <LineIcon
-                  :lineSlugName="line"
+                  :line-slug-name="line"
                   :color="tabIndex() === i ? 'dark' : 'light'"
                   size="sm"
                 />
-                <span v-if="stop" class="tab-label-text">
+                <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)"
             >
@@ -31,35 +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="`/timetables/${i + 1}/${path}`">
+              <router-link
+                class="tab-link"
+                :to="`/timetables/${i + 1}/${path}`"
+              >
                 <span class="tab-label">
                   <LineIcon
-                    :lineSlugName="line"
+                    :line-slug-name="line"
                     :color="tabIndex() === i ? 'dark' : 'light'"
                     size="sm"
                   />
-                  <span v-if="stop" class="tab-label-text">
+                  <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>

diff --git a/src/components/AppView.vue b/src/components/AppView.vue
@@ -2,8 +2,7 @@
   <div>
     <AppHeader />
     <div class="tab">
-      <router-view>
-      </router-view>
+      <router-view />
     </div>
     <AppNav />
   </div>

diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
@@ -4,7 +4,7 @@
     :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
     :alt="`${lineSlugName}`"
     :size="size"
-    :fadeIn="fadeIn"
+    :fade-in="fadeIn"
   />
 </template>
 

diff --git a/src/components/LineMap/LineMap.vue b/src/components/LineMap/LineMap.vue
@@ -1,7 +1,7 @@
 <template>
   <LineMapTable
     :line="line"
-    :routeMap="routeMap"
+    :route-map="routeMap"
   />
 </template>
 
@@ -20,6 +20,11 @@ export default Vue.extend({
   data: () => ({
     routeMap: [] as RouteMapType,
   }),
+  watch: {
+    line () {
+      this.update()
+    },
+  },
   created () {
     this.update()
   },
@@ -28,11 +33,6 @@ export default Vue.extend({
       this.routeMap = getLineRouteMap(this.line)
     },
   },
-  watch: {
-    line () {
-      this.update()
-    },
-  },
 })
 </script>
 

diff --git a/src/components/LineMap/LineMapDrawingCell.vue b/src/components/LineMap/LineMapDrawingCell.vue
@@ -1,48 +1,108 @@
 <template>
-  <svg v-if="content === '*'" class="drawing-stop" viewBox="0 0 16 16">
-    <circle v-if="isLargeCircle" cx="8" cy="8" r="6"/>
-    <circle v-else cx="8" cy="8" r="4"/>
+  <svg
+    v-if="content === '*'"
+    class="drawing-stop"
+    viewBox="0 0 16 16"
+  >
+    <circle
+      v-if="isLargeCircle"
+      cx="8"
+      cy="8"
+      r="6"
+    />
+    <circle
+      v-else
+      cx="8"
+      cy="8"
+      r="4"
+    />
   </svg>
 
-  <svg v-else-if="content === '^'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === '^'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
     <path d="M0,8 a8,-8 0 0,1 8,-8 L0,0 Z" />
   </svg>
 
-  <svg v-else-if="content === 'v'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === 'v'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M0,8 a8,8 0 0,0 8,8 L0,16 Z" />
     <path d="M8,16 a8,-8 0 0,0 8,-8 L16,16 Z" />
   </svg>
 
-  <svg v-else-if="content === 'o\\'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === 'o\\'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === 'o/'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
+  <svg
+    v-else-if="content === 'o/'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(90)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === '\\o'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
+  <svg
+    v-else-if="content === '\\o'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(180)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === '/o'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
+  <svg
+    v-else-if="content === '/o'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(270)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === '\\.'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === '\\.'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 
-  <svg v-else-if="content === '/.'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
+  <svg
+    v-else-if="content === '/.'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(90)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 
-  <svg v-else-if="content === '.\\'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
+  <svg
+    v-else-if="content === '.\\'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(180)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 
-  <svg v-else-if="content === './'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
+  <svg
+    v-else-if="content === './'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(270)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 

diff --git a/src/components/LineMap/LineMapLabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
@@ -1,5 +1,6 @@
 <template>
-  <router-link v-if="href"
+  <router-link
+    v-if="href"
     class="label-text"
     :to="href"
   >
@@ -8,15 +9,18 @@
       <LineIcon
         v-for="conn in lineConnections"
         :key="`${conn.line}/${conn.slugName}`"
-        :lineSlugName="conn.line"
+        :line-slug-name="conn.line"
         color="colors"
         size="sm"
-        fadeIn
+        fade-in
       />
     </div>
   </router-link>
 
-  <div v-else class="label-text">
+  <div
+    v-else
+    class="label-text"
+  >
     {{ stopName }}
     <div class="line-connections">
       <img