From 512afa553bd2f1074c405fbb4d729a21aaa15bb5 Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Sun, 7 Aug 2022 22:36:48 +0300
Subject: [PATCH] - Added page-not-found-404 view. - Modified pattern-item
 component template and styles. Show now pattern type. Changed sizes. -
 Modified patterns order. - Made lazy-loads in vue-router. - Made catch-all
 redirect for 404. - Fixes in input-range. - Cleaned code.

---
 public/assets/patterns.json    | 112 ++++++++++++++++-----------------
 public/css/styles.css          |   4 +-
 src/App.vue                    |   4 --
 src/components/AppManual.vue   |   1 +
 src/components/PatternItem.vue |  36 ++++++++---
 src/router/index.ts            |  12 +++-
 src/views/NotFoundView.vue     |  16 +++++
 7 files changed, 112 insertions(+), 73 deletions(-)
 create mode 100644 src/views/NotFoundView.vue

diff --git a/public/assets/patterns.json b/public/assets/patterns.json
index e447ece..d60a1da 100644
--- a/public/assets/patterns.json
+++ b/public/assets/patterns.json
@@ -26,8 +26,21 @@
     ]
   },
   {
-    "name": "Dotted AC",
+    "name": "Dotted Max",
     "type": "Simple",
+    "icon": "🙃",
+    "pattern": [
+      {
+        "startDelay": 200,
+        "duration": 100,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Dotted AC",
+    "type": "Combined",
     "icon": "🤨",
     "pattern": [
       {
@@ -44,19 +57,6 @@
       }
     ]
   },
-  {
-    "name": "Dotted Max",
-    "type": "Simple",
-    "icon": "🙃",
-    "pattern": [
-      {
-        "startDelay": 200,
-        "duration": 100,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
-  },
   {
     "name": "Short Dashed Weak",
     "type": "Simple",
@@ -84,8 +84,21 @@
     ]
   },
   {
-    "name": "Short Dashed AC",
+    "name": "Short Dashed Max",
     "type": "Simple",
+    "icon": "😊",
+    "pattern": [
+      {
+        "startDelay": 200,
+        "duration": 250,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Short Dashed AC",
+    "type": "Combined",
     "icon": "🤤",
     "pattern": [
       {
@@ -102,19 +115,6 @@
       }
     ]
   },
-  {
-    "name": "Short Dashed Max",
-    "type": "Simple",
-    "icon": "😊",
-    "pattern": [
-      {
-        "startDelay": 200,
-        "duration": 250,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
-  },
   {
     "name": "Long Dashed Weak",
     "type": "Simple",
@@ -142,8 +142,21 @@
     ]
   },
   {
-    "name": "Long Dashed AC",
+    "name": "Long Dashed Max",
     "type": "Simple",
+    "icon": "🤪",
+    "pattern": [
+      {
+        "startDelay": 200,
+        "duration": 500,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Long Dashed AC",
+    "type": "Combined",
     "icon": "😝",
     "pattern": [
       {
@@ -160,19 +173,6 @@
       }
     ]
   },
-  {
-    "name": "Long Dashed Max",
-    "type": "Simple",
-    "icon": "🤪",
-    "pattern": [
-      {
-        "startDelay": 200,
-        "duration": 500,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
-  },
   {
     "name": "Constant Weak",
     "type": "Simple",
@@ -200,8 +200,21 @@
     ]
   },
   {
-    "name": "Constant AC",
+    "name": "Constant Max",
     "type": "Simple",
+    "icon": "😍",
+    "pattern": [
+      {
+        "startDelay": 0,
+        "duration": 1000,
+        "weakMagnitude": 1.0,
+        "strongMagnitude": 1.0
+      }
+    ]
+  },
+  {
+    "name": "Constant AC",
+    "type": "Combined",
     "icon": "😵",
     "pattern": [
       {
@@ -217,18 +230,5 @@
         "strongMagnitude": 1.0
       }
     ]
-  },
-  {
-    "name": "Constant Max",
-    "type": "Simple",
-    "icon": "😍",
-    "pattern": [
-      {
-        "startDelay": 0,
-        "duration": 1000,
-        "weakMagnitude": 1.0,
-        "strongMagnitude": 1.0
-      }
-    ]
   }
 ]
\ No newline at end of file
diff --git a/public/css/styles.css b/public/css/styles.css
index 8fcc6d4..c10637f 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -236,14 +236,14 @@ option {
 input[type=range] {
     width: 100%;
     margin: 8px 0;
-    padding: 0;
+    padding: 4px 0;
     border: 0px solid var(--color-link);
     -webkit-appearance: none;
 }
 
     input[type=range]:hover {
         margin: 8px 0;
-        padding: 0;
+        padding: 4px 0;
         border: 0px solid var(--color-link-hover);
     }
 
diff --git a/src/App.vue b/src/App.vue
index 471fcd8..b1a79c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,7 +47,3 @@
     });
 </script>
 
-<style lang="scss">
-    
-</style>
-
diff --git a/src/components/AppManual.vue b/src/components/AppManual.vue
index 0cec669..0e0fbe7 100644
--- a/src/components/AppManual.vue
+++ b/src/components/AppManual.vue
@@ -79,6 +79,7 @@
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px;
+        align-items: center;
     }
 </style>
 
diff --git a/src/components/PatternItem.vue b/src/components/PatternItem.vue
index ef3a749..a25bcf3 100644
--- a/src/components/PatternItem.vue
+++ b/src/components/PatternItem.vue
@@ -6,8 +6,12 @@
                  ]">
         <span class="pattern-item__icon"
               v-text="pattern.icon"></span>
-        <span class="pattern-item__name"
-              v-text="pattern.name"></span>
+        <div class="pattern-item__info-container">
+            <span class="pattern-item__name"
+                  v-text="pattern.name"></span>
+            <span class="pattern-item__type"
+                  v-text="pattern.type"></span>
+        </div>
     </div>
 </template>
 
@@ -41,14 +45,14 @@
 <style lang="scss">
     .pattern-item {
         width: 100%;
-        height: 48px;
+        height: 50px;
         padding: 8px;
         border-radius: var(--number-border-radius);
         background: var(--color-pattern-button);
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        gap: 16px;
+        gap: 8px;
         align-items: center;
         text-align: center;
         overflow: hidden;
@@ -73,11 +77,25 @@
         font-size: 24px;
     }
 
-    .pattern-item__name {
-        font-size: 14px;
-        white-space: nowrap;
-        overflow: hidden;
-        color: var(--color-pattern-text);
+    .pattern-item__info-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        text-align: left;
     }
+
+        .pattern-item__name {
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            color: var(--color-pattern-text);
+        }
+
+        .pattern-item__type {
+            font-size: 12px;
+            white-space: nowrap;
+            overflow: hidden;
+            color: var(--color-pattern-text);
+        }
 </style>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 547ed7a..e3f2ab1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import PatternsView from '@/views/PatternsView.vue';
-import ManualView from '@/views/ManualView.vue';
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -11,7 +10,16 @@ const routes: Array<RouteRecordRaw> = [
     {
         path: '/manual',
         name: 'manual-view',
-        component: ManualView,
+        component: () => import('@/views/ManualView.vue'),
+    },
+    {
+        path: '/404',
+        name: '404',
+        component: () => import('@/views/NotFoundView.vue'),
+    },
+    {
+        path: '/:catchAll(.*)',
+        redirect: '/404',
     },
 ];
 
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
new file mode 100644
index 0000000..82a28e3
--- /dev/null
+++ b/src/views/NotFoundView.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="content-item">
+        <center>
+            <h2>404. Page not Found...</h2>
+        </center>
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+
+    export default defineComponent({
+        name: 'NotFoundView',
+    });
+</script>
+