Bump to 2024 with some QoL updates

.env

@@ -1,3 +1,3 @@
-COSCUP_AGENDA_YEAR=2023
-COSCUP_AGENDA_DATE_D1=20230729
-COSCUP_AGENDA_DATE_D2=20230730
+COSCUP_AGENDA_YEAR=2024
+COSCUP_AGENDA_DATE_D1=20240803
+COSCUP_AGENDA_DATE_D2=20240804

README.md

@@ -1,4 +1,4 @@
-[COSCUP ~~2020~~ 2023 行動議程表](https://qbane.github.io/COSCUP_Agenda/)
+[COSCUP ~~2020~~ 2024 行動議程表](https://qbane.github.io/COSCUP_Agenda/)
 =================
 
 參加 COSCUP 許多年，老是在找下一場該去聽什麼？

index.html

@@ -38,7 +38,7 @@ <h1>COSCUP %COSCUP_AGENDA_YEAR% ▸ 下一場聽什麼？</h1>
     &nbsp;|&nbsp;
     <a onclick="purgeOfflineData()">清理離線資料 🗑</a>
     <div style="margin-top:4pt;color:hsl(0, 0%, 80%);font-family:monospace;">
-      <a style="color: hsl(240, 90%, 64%);" href="https://github.com/qbane/COSCUP_Agenda" target="_blank">v20230728r2</a> fork of @qbane
+      <a style="color: hsl(240, 90%, 64%);" href="https://github.com/qbane/COSCUP_Agenda" target="_blank">v20240729r0</a> fork of @qbane
     </div>
   </div>
 </footer>
@@ -51,13 +51,15 @@ <h1>COSCUP %COSCUP_AGENDA_YEAR% ▸ 下一場聽什麼？</h1>
       hcl.add(theme);
     }
 
-    if (!('theme' in localStorage)) {
-      localStorage.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+    let theme;
+    if ('theme' in localStorage) {
+      theme = localStorage.theme;
+    } else {
+      theme = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light';
     }
-
-    __set_theme__(localStorage.theme);
+    __set_theme__(theme);
   } catch (e) {
     console.error(e);
   }

public/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "COSCUP 2023 下一場聽什麼？",
-  "short_name": "COSCUP 2023",
+  "name": "COSCUP 2024 下一場聽什麼？",
+  "short_name": "COSCUP 2024",
   "display": "standalone",
   "start_url": ".",
   "theme_color": "#ffffff",

src/components/Agenda.vue

@@ -14,6 +14,12 @@
     <a v-on:click.prevent="toggleTimeMachine" v-bind:class="{ active: timeMachine }">跳</a>
     <a style="font-weight:bold" v-on:click.prevent="reloadPrograms(true)">更</a>
     <a void id="theme-toggler" v-on:click.prevent="toggleTheme">{{ currentThemeText }}</a>
+    <select id="quick-navigator" v-on:change="navigateToTrack">
+      <option value="" selected>⏩</option>
+      <option value="__top__">🔼</option>
+      <option v-for="[floorName, roomIds] in roomIdsByFloors" v-bind:disabled="roomIds.every(id => !trackToVisibility[id])" v-bind:value="floorName">{{ floorName }}</option>
+      <option value="__bottom__">🔽</option>
+    </select>
   </nav>
 
   <div class="time-machine" v-if="timeMachine">
@@ -33,9 +39,8 @@
     試試看在議程上往左滑動來標註！
   </div>
 
-  <div class="track" v-for="track in tracks"
-    v-if="(!nextOnly && !starredOnly) || (nextOnly && track.hasNextOrOngoing) || (starredOnly && track.talks.filter(t => starreds.indexOf(t.id) >= 0).length)">
-    <h2 class="track-title">{{ track.roomName }}</h2>
+  <div class="track" v-for="track in tracks" v-if="trackToVisibility[track.roomId]">
+    <h2 class="track-title" v-bind:data-floor-id="roomIdsByFloors.map(([fid, arr]) => arr.includes(track.roomId) && fid).filter(x => x !== false)[0]">{{ track.roomName }}</h2>
     <div class="talks" v-bind:class="{ nextOnly: nextOnly, starredOnly: starredOnly }">
       <div class="talk" v-for="(talk, index) in track.talks"
         v-bind:class="{ expired: talk.isExpired, ongoing: talk.isOngoing, next: talk.isNext,

src/lib.js

@@ -83,14 +83,17 @@ export function updateTracks(programs) {
     };
   }).filter(t => t.talks.length);
 
-  // COSCUP 2023
-  const sortedRoomIds = [
-    'RB105', 'AU101',
-    'TR209', 'TR211', 'TR212', 'TR213', 'TR214',
-    'TR310-1', 'TR310-2', 'TR311', 'TR313',
-    'TR409-1', 'TR409-2', 'TR410', 'TR411', 'TR412-1', 'TR412-2', 'TR413-1', 'TR413-2',
-    'TR510'
+  // COSCUP 2024
+  const roomIdsByFloors = [
+    ['1F', ['RB105', 'RB101', 'RB102']],
+    ['2F', ['TR209', 'TR210', 'TR211', 'TR212', 'TR213', 'TR214']],
+    ['3F', ['TR313']],
+    ['4F', ['TR409-2', 'TR410', 'TR411', 'TR412-1', 'TR412-2', 'TR413-1', 'TR413-2']],
+    ['5F', ['TR510', 'TR511', 'TR512', 'TR513', 'TR514']],
+    ['6F', ['TR609', 'TR610', 'TR611', 'TR613', 'TR614', 'TR615', 'TR616']],
   ];
+  const sortedRoomIds = roomIdsByFloors.map(([, snd]) => snd).flat()
+
   const sortedTracksWithTalks = tracksWithTalks.sort((a, b) =>
     (sortedRoomIds.indexOf(a.roomId) - sortedRoomIds.indexOf(b.roomId)));
 
@@ -100,5 +103,5 @@ export function updateTracks(programs) {
   });
 
   window.speakersById = speakersById;
-  agendaView.updateTracks(today, sortedTracksWithTalks, speakersById, programs.__timestamp__);
+  agendaView.updateTracks(today, sortedTracksWithTalks, speakersById, roomIdsByFloors, programs.__timestamp__);
 }

src/script.js

@@ -77,6 +77,7 @@ export const agendaView = new Vue({
     tracks: [],
     nextOnly: false,
     starredOnly: false,
+    roomIdsByFloors: [],
     timeMachine: false,
     timeMachineValue: 0,
     starreds: JSON.parse(localStorage.getItem('starreds') || '[]'),
@@ -90,6 +91,15 @@ export const agendaView = new Vue({
     timeMachineTime: function() {
       return moment(this.today).startOf('day').add(this.timeMachineValue, 'minutes');
     },
+    trackToVisibility: function() {
+      const { nextOnly, starredOnly, starreds } = this
+      return Object.fromEntries(this.tracks.map(track => [
+        track.roomId,
+          (!nextOnly && !starredOnly) ||
+          (nextOnly && track.hasNextOrOngoing) ||
+          (starredOnly && track.talks.filter(t => starreds.indexOf(t.id) >= 0).length)
+        ]))
+    }
   },
   methods: {
     toggleTheme: function() {
@@ -102,10 +112,31 @@ export const agendaView = new Vue({
       __set_theme__(this.currentTheme)
     },
 
-    updateTracks: function(today, tracks, speakersById, ts = undefined) {
+    navigateToTrack: function(evt) {
+      const floorId = evt.currentTarget.value
+      if (floorId === '__top__') {
+        window.scrollTo(0, 0);
+      } else if (floorId === '__bottom__') {
+        window.scrollTo(0, document.body.scrollHeight);
+      } else {
+        // to work around sticky elements; not pixel perfect but usable
+        window.scrollTo(0, 0);
+        setTimeout(() => {
+          const el = document.querySelector(`[data-floor-id="${floorId}"]`)
+          if (el) {
+            el.scrollIntoView({block: 'start'})
+          }
+        })
+      }
+
+      evt.currentTarget.value = ''
+    },
+
+    updateTracks: function(today, tracks, speakersById, roomIdsByFloors, ts = undefined) {
       this.today = today;
       this.tracks = tracks;
       this.speakersById = speakersById;
+      this.roomIdsByFloors = roomIdsByFloors;
       this.lastUpdate = moment(ts);
     },
 
@@ -224,6 +255,9 @@ function purgeOfflineData() {
   localStorage.removeItem('programs');
   console.log('Removed cached programs');
 
+  localStorage.removeItem('theme');
+  console.log('Removed theme config');
+
   function afterPurgeComplete() {
     window.location.reload();
   }

src/style.css

@@ -51,7 +51,7 @@ nav {
   position: sticky;
   position: -webkit-sticky;
   top: 0;
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(7px) contrast(1.25);
   -webkit-backdrop-filter: blur(7px) contrast(1.25);
   z-index: 5566;
@@ -325,6 +325,21 @@ html.dark .time-machine {
   */
 }
 
+#quick-navigator {
+  border: 0 none;
+  padding: 5pt 7pt;
+  margin: 0;
+  margin-left: 15pt;
+  border-radius: 2pt;
+  font-size: inherit;
+  position: absolute;
+  right: 8px;
+  bottom: 6px;
+
+  background: hsl(165, 80%, 40%);
+  filter: grayscale(100%);
+}
+
 .last-update {
   color: hsl(0, 0%, 60%);
   font-size: 9pt;