add bootstrap and refactor extract component

package.json

@@ -13,7 +13,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/vue-fontawesome": "^3.0.2",
+    "@popperjs/core": "^2.11.6",
+    "bootstrap": "^5.2.2",
     "core-js": "^3.8.3",
+    "jquery": "^3.6.1",
     "vue": "^3.2.13",
     "vue-router": "^4.1.6"
   },

src/App.vue

@@ -21,6 +21,8 @@ export default {
 </script>
 
 <style>
+@import "bootstrap";
+
 .nav-top {
   display: block;
   font-size: large;
@@ -34,12 +36,7 @@ export default {
   width: 20px;
 }
 
-ul.route-list {
-  list-style: none;
-  padding: 0;
-}
-
-.list-item, .route-item {
+.list-item {
   border: 1px solid;
   display: block;
   margin: .5rem;

src/components/ScheduleList.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="list">
+    <div class="list-title">{{ $route.params.date }}</div>
+    <div v-for="(el, index) in timeline" :key="index" class="list-item">
+      <time>{{ el.date }} {{ el.time }}</time>
+      <SchedulePlace v-if="el.place" :place="places[el.place]" />
+      <ScheduleRouteList v-if="el.routes" :routes="el.routes" />
+    </div>
+  </div>
+</template>
+
+<script>
+import SchedulePlace from '@/components/SchedulePlace'
+import ScheduleRouteList from '@/components/ScheduleRouteList'
+
+export default {
+  name: 'ScheduleList',
+  components: { ScheduleRouteList, SchedulePlace },
+  props: ['places', 'timeline'],
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/SchedulePlace.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="place">
+    <div v-if="place.name" class="place-name">
+      <div lang="ja">{{ place.name.jp }}</div>
+      <div lang="zh">{{ place.name.tw }}</div>
+      <div lang="en">{{ place.name.en }}</div>
+    </div>
+    <div v-if="place.address" class="place-address">
+      <div class="zipcode">〒{{ place.address.zipcode }}</div>
+      <div lang="ja">{{ place.address.jp }}</div>
+      <div lang="en">{{ place.address.en }}</div>
+    </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>
+</template>
+
+<script>
+export default {
+  name: 'SchedulePlace',
+  props: ['place'],
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ScheduleRoute.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="list-item route-item small">
+    <time v-if="route.time" class="route-time my-1">{{ route.time }}</time>
+    <div class="d-flex my-1">
+      <font-awesome-icon v-if="route.icon" :icon="route.icon" class="route-icon" />
+      <div class="d-flex flex-grow-1 flex-column">
+        <div v-if="route.from" class="route-from mx-2">出發地：{{ route.from }}</div>
+        <div v-if="route.to" class="route-to mx-2">目的地：{{ route.to }}</div>
+      </div>
+    </div>
+    <div v-if="route.lines" class="route-line-list my-1">
+      <div
+          v-for="(line, index) in route.lines"
+          :key="index"
+          :style="route.color ? ColorUtil.setContrast(route.color) : {}"
+          class="route-line d-inline-block mx-1 px-1"
+      >{{ line }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ColorUtil from '@/utils/ColorUtil'
+
+export default {
+  name: 'ScheduleRoute',
+  props: ['route'],
+  data() {
+    return {
+      ColorUtil,
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ScheduleRouteList.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="routes" class="route-list">
+    <ScheduleRoute v-for="(route, index) in routes" :key="index" :route="route" />
+  </div>
+</template>
+
+<script>
+import ScheduleRoute from '@/components/ScheduleRoute'
+
+export default {
+  name: 'ScheduleRouteList',
+  components: { ScheduleRoute },
+  props: ['routes'],
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import 'bootstrap'
 import routes from '@/routes'
 import App from '@/App'
 import { library } from '@fortawesome/fontawesome-svg-core'

src/pages/SchedulePage.vue

@@ -1,54 +1,15 @@
 <template>
-  <div class="list">
-    <div class="list-title">{{ $route.params.date }}</div>
-    <div v-for="(el, index) in schedule.timeline" :key="index" class="list-item">
-      <time>{{ el.date }} {{ el.time }}</time>
-      <div v-if="el.place" :set="place = schedule.places[el.place]" class="place">
-        <div v-if="place.name" class="place-name">
-          <div lang="ja">{{ place.name.jp }}</div>
-          <div lang="zh">{{ place.name.tw }}</div>
-          <div lang="en">{{ place.name.en }}</div>
-        </div>
-        <div v-if="place.address" class="place-address">
-          <div class="zipcode">〒{{ place.address.zipcode }}</div>
-          <div lang="ja">{{ place.address.jp }}</div>
-          <div lang="en">{{ place.address.en }}</div>
-        </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="(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>
-  </div>
+  <ScheduleList :places="schedule.places" :timeline="schedule.timeline" />
 </template>
 
 <script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import Schedules from '@/schedules'
 import ColorUtil from '@/utils/ColorUtil'
+import ScheduleList from '@/components/ScheduleList'
 
 export default {
   name: 'SchedulePage',
-  components: { FontAwesomeIcon },
+  components: { ScheduleList },
   data() {
     return {
       ColorUtil,
@@ -59,4 +20,5 @@ export default {
 </script>
 
 <style scoped>
+
 </style>

yarn.lock

@@ -1134,6 +1134,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.11.6":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -2129,6 +2134,11 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bootstrap@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.2.tgz#834e053eed584a65e244d8aa112a6959f56e27a0"
+  integrity sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3842,6 +3852,11 @@ joi@^17.4.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+jquery@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.1.tgz#fab0408f8b45fc19f956205773b62b292c147a16"
+  integrity sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==
+
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"