tweak ui, add icons

package.json

@@ -8,6 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-router": "^4.1.6"

src/main.js

@@ -2,10 +2,36 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from '@/routes'
 import App from '@/App'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faHotel,
+  faPersonWalking,
+  faPhone,
+  faPlaneArrival,
+  faPlaneDeparture,
+  faShop,
+  faStore,
+  faTrainSubway,
+  faUtensils,
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faHotel,
+  faPersonWalking,
+  faPhone,
+  faPlaneArrival,
+  faPlaneDeparture,
+  faShop,
+  faStore,
+  faTrainSubway,
+  faUtensils,
+)
 
 createApp(App)
   .use(createRouter({
     history: createWebHistory(),
     routes,
   }))
+  .component('font-awesome-icon', FontAwesomeIcon)
   .mount('#app')

src/pages/SchedulePage.vue

@@ -16,13 +16,25 @@
         </div>
         <div v-if="place.tel" class="place-tel">
           <a :href="'tel:' + place.tel" :title="place.tel">
+            <font-awesome-icon icon="fa-solid fa-phone" />
             {{ place.tel }}
           </a>
         </div>
       </div>
       <ul v-if="el.routes" class="route-list">
-        <li v-for="(stop, index) in el.routes" :key="index" class="route-item">
+        <li
-          <pre>{{ stop }}</pre>
+            v-for="(route, index) in el.routes"
+            :key="index"
+            :style="route.color ? ColorUtil.setContrast(route.color) : {}"
+            class="route-item"
+        >
+          <time v-if="route.time" class="route-time">{{ route.time }}</time>
+          <font-awesome-icon v-if="route.icon" :icon="route.icon" class="route-icon" />
+          <div v-if="route.from" class="route-from">{{ route.from }}</div>
+          <div v-if="route.to" class="route-to">{{ route.to }}</div>
+          <div v-if="route.lines" class="route-line-list">
+            <div v-for="(line, index) in route.lines" :key="index" class="route-line">{{ line }}</div>
+          </div>
         </li>
       </ul>
     </div>
@@ -30,12 +42,16 @@
 </template>
 
 <script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import Schedules from '@/schedules'
+import ColorUtil from '@/utils/ColorUtil'
 
 export default {
   name: 'SchedulePage',
+  components: { FontAwesomeIcon },
   data() {
     return {
+      ColorUtil,
       schedule: Schedules[this.$route.params.date],
     }
   },

src/schedules.js

@@ -84,7 +84,12 @@ const Schedules = {
       },
     },
     timeline: [
-      { date: '2023-01-10', time: '10:25', place: 'kia' },
+      {
+        date: '2023-01-10',
+        time: '10:25',
+        place: 'kia',
+        icon: 'fa-solid fa-plane-arrival',
+      },
       {
         date: '2023-01-10',
         time: '11:10~12:39',
@@ -94,35 +99,118 @@ const Schedules = {
             from: '關西機場',
             to: '南海難波',
             lines: ['南海機場線', '南海本線'],
+            icon: 'fa-solid fa-train-subway',
             color: '#228b22',
           },
-          { time: '12:02~12:03', from: '難波站', to: '心齋橋站', lines: ['御堂筋線'], color: '#dd2f18' },
+          {
-          { time: '12:08~12:33', from: '心齋橋站', to: '門真南', lines: ['長堀鶴見綠地線'], color: '#afd331' },
+            time: '12:02~12:03',
+            from: '難波站',
+            to: '心齋橋站',
+            lines: ['御堂筋線'],
+            icon: 'fa-solid fa-train-subway',
+            color: '#dd2f18',
+          },
+          {
+            time: '12:08~12:33',
+            from: '心齋橋站',
+            to: '門真南',
+            lines: ['長堀鶴見綠地線'],
+            icon: 'fa-solid fa-train-subway',
+            color: '#afd331',
+          },
         ],
       },
-      { date: '2023-01-10', time: '12:30-17:30', place: 'mop-osaka-tsurumi' },
+      {
+        date: '2023-01-10',
+        time: '12:30-17:30',
+        place: 'mop-osaka-tsurumi',
+        icon: 'fa-solid fa-shop',
+      },
       {
         date: '2023-01-10',
         time: '17:33~18:13',
         routes: [
-          { time: '11:10~11:55', from: '門真南', to: '長堀橋', lines: ['長堀鶴見綠地線'], color: '#afd331' },
+          {
-          { time: '11:10~11:55', from: '長堀橋', to: '惠美須町', lines: ['堺筋線'], color: '#ad4a28' },
+            time: '11:10~11:55',
+            from: '門真南',
+            to: '長堀橋',
+            lines: ['長堀鶴見綠地線'],
+            icon: 'fa-solid fa-train-subway',
+            color: '#afd331',
+          },
+          {
+            time: '11:10~11:55',
+            from: '長堀橋',
+            to: '惠美須町',
+            lines: ['堺筋線'],
+            icon: 'fa-solid fa-train-subway',
+            color: '#ad4a28',
+          },
         ],
       },
-      { date: '2023-01-10', time: '18:15-18:30', place: 'hotel-amaterrace' },
+      {
+        date: '2023-01-10',
+        time: '18:15-18:30',
+        place: 'hotel-amaterrace',
+        icon: 'fa-solid fa-hotel',
+      },
       {
         date: '2023-01-10',
         time: '18:30~18:48',
         routes: [
-          { time: '18:34~18:45', from: '惠美須町', to: '扇町（大阪）', lines: ['堺筋線'], color: '#ad4a28' },
+          {
+            time: '18:34~18:45',
+            from: '惠美須町',
+            to: '扇町（大阪）',
+            lines: ['堺筋線'],
+            icon: 'fa-solid fa-train-subway',
+            color: '#ad4a28',
+          },
         ],
       },
-      { date: '2023-01-10', time: '18:48-22:00', place: 'temma' },
+      {
-      { date: '2023-01-10', time: '22:00-22:30', place: 'donki-osaka-temma' },
+        date: '2023-01-10',
-      { date: '2023-01-10', time: '23:00', place: 'ichiran-dotonbori-south' },
+        time: '18:48-22:00',
-      { date: '2023-01-10', time: '24:00-08:00', place: 'hotel-amaterrace' },
+        place: 'temma',
-      { date: '2023-01-11', time: '08:00-08:20', routeUrl: 'https://goo.gl/maps/DwjZ8DZ8Zpi9uUpH9' },
+        icon: 'fa-solid fa-store',
-      { date: '2023-01-11', time: '08:20-11:00', place: 'kuromon' },
+      },
+      {
+        date: '2023-01-10',
+        time: '22:00-22:30',
+        place: 'donki-osaka-temma',
+        icon: 'fa-solid fa-shop',
+      },
+      {
+        date: '2023-01-10',
+        time: '23:00',
+        place: 'ichiran-dotonbori-south',
+        icon: 'fa-solid fa-utensils',
+      },
+      {
+        date: '2023-01-10',
+        time: '24:00-08:00',
+        place: 'hotel-amaterrace',
+        icon: 'fa-solid fa-hotel',
+      },
+      {
+        date: '2023-01-11',
+        time: '08:00-08:20',
+        routes: [
+          {
+            time: '08:00-08:20',
+            from: 'ホテル アマテラス 縁 -よすが-',
+            to: '黒門市場',
+            icon: 'fa-solid fa-person-walking',
+          },
+        ],
+        routeUrl: 'https://goo.gl/maps/DwjZ8DZ8Zpi9uUpH9',
+      },
+      {
+        date: '2023-01-11',
+        time: '08:20-11:00',
+        place: 'kuromon',
+        icon: 'fa-solid fa-store',
+      },
     ],
   },
 }

src/utils/ColorUtil.js

@@ -0,0 +1,28 @@
+const ColorUtil = {
+  rgbToHex(r, g, b) {
+    return '#' + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)
+  },
+  hexToRgb(hex) {
+    const regex = hex.length < 6
+      ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+      : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
+    const result = regex.exec(hex)
+    if (!result) return null
+    return {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16),
+    }
+  },
+  setContrast(backgroundColor) {
+    const rgb = ColorUtil.hexToRgb(backgroundColor)
+    const brightness = Math.round((rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000)
+    const color = brightness > 125 ? 'black' : 'white'
+    return {
+      backgroundColor,
+      color,
+    }
+  },
+}
+
+export default ColorUtil

yarn.lock

@@ -977,6 +977,44 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz#411e02a820744d3f7e0d8d9df9d82b471beaa073"
+  integrity sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==
+
+"@fortawesome/fontawesome-svg-core@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz#e87e905e444b5e7b715af09b64d27b53d4c8f9d9"
+  integrity sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.2.1"
+
+"@fortawesome/free-brands-svg-icons@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz#04a6d6f7898f7ef392aba7a65030a584d4f4c84f"
+  integrity sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.2.1"
+
+"@fortawesome/free-regular-svg-icons@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz#650e56d937755a8341f2eef258ecb6f95458820f"
+  integrity sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.2.1"
+
+"@fortawesome/free-solid-svg-icons@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz#2290ea5adcf1537cbd0c43de6feb38af02141d27"
+  integrity sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.2.1"
+
+"@fortawesome/vue-fontawesome@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.2.tgz#1b2ec546caab790c38d3dcb38407485a70703dd2"
+  integrity sha512-xHVtVY8ASUeEvgcA/7vULUesENhD+pi/EirRHdMBqooHlXBqK+yrV6d8tUye1m5UKQKVgYAHMhUBfOnoiwvc8Q==
+
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"