breaks to schedule

robotframework · Nov 25, 2024 · 1b9da7a · 1b9da7a
1 parent 241d7bc
commit 1b9da7a
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 94 deletions.
diff --git a/docs/assets/index-BXG5X0eT.js → docs/assets/index-CFOquw6v.js b/docs/assets/index-BXG5X0eT.js → docs/assets/index-CFOquw6v.js
diff --git a/docs/assets/index-EUG6_8_S.css b/docs/assets/index-EUG6_8_S.css
diff --git a/docs/assets/index-cFK8qZcE.css b/docs/assets/index-cFK8qZcE.css
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RoboCon - Robot Framework Conference</title>
     <script defer src="/spa.js"></script>
-    <script type="module" crossorigin src="/assets/index-BXG5X0eT.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-cFK8qZcE.css">
+    <script type="module" crossorigin src="/assets/index-CFOquw6v.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-EUG6_8_S.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
@@ -6,7 +6,7 @@
 
     --color-white: #f5f5f5;
     --color-grey-light: #e7e7e7;
-    --color-grey: #e2e2e2;
+    --color-grey: #929292;
     --color-grey-dark: #24282c;
     --color-grey-darkest: #101316;
     --color-black: #000000; /* body text */

diff --git a/src/components/PretalxSchedule.vue b/src/components/PretalxSchedule.vue
@@ -27,19 +27,19 @@
     <div v-else-if="data && talks">
       <template v-if="shownTalks === 'live'">
         <h2>Workshops</h2>
-        <TalkItem v-for="event in talks.workshop" :key="event.code" :event="{...event, type: 'talk'}" />
+        <TalkItem v-for="(event, i) in talks.workshop" :key="i" :event="{...event}" />
         <h2>Talks - Day 1</h2>
-        <TalkItem v-for="event in talks.live.filter((event) => getDate(new Date(event.slot.start)) === 13)" :key="event.code" :event="{...event, type: 'talk'}" />
+        <TalkItem v-for="(event, i) in talks.live.filter((event) => getDate(new Date(event.slot.start)) === 13)" :key="i" :event="{...event}" />
         <h2>Talks - Day 2</h2>
-        <TalkItem v-for="event in talks.live.filter((event) => getDate(new Date(event.slot.start)) === 14)" :key="event.code" :event="{...event, type: 'talk'}" />
+        <TalkItem v-for="(event, i) in talks.live.filter((event) => getDate(new Date(event.slot.start)) === 14)" :key="i" :event="{...event}" />
       </template>
       <template v-else-if="shownTalks === 'online'">
         <h2>Tutorials</h2>
-        <TalkItem v-for="event in talks.tutorial" :key="event.code" :event="{...event, type: 'talk'}" />
+        <TalkItem v-for="(event, i) in talks.tutorial" :key="i" :event="{...event}" />
         <h2>Talks - Day 1</h2>
-        <TalkItem v-for="event in talks.online.filter((event) => getDate(new Date(event.slot.start)) === 5)" :key="event.code" :event="{...event, type: 'talk'}" />
+        <TalkItem v-for="(event, i) in talks.online.filter((event) => getDate(new Date(event.slot.start)) === 5)" :key="i" :event="{...event}" />
         <h2>Talks - Day 2</h2>
-        <TalkItem v-for="event in talks.online.filter((event) => getDate(new Date(event.slot.start)) === 6)" :key="event.code" :event="{...event, type: 'talk'}" />
+        <TalkItem v-for="(event, i) in talks.online.filter((event) => getDate(new Date(event.slot.start)) === 6)" :key="i" :event="{...event}" />
       </template>
     </div>
   </div>
@@ -50,7 +50,7 @@ import type { PretalxSchedule } from '@/content';
 import { computed, nextTick, ref, type PropType } from 'vue';
 import { useFetch } from '@vueuse/core'
 import TalkItem from './TalkItem.vue'
-import type { PretalxEvent, PretalxSession, ScheduleResponse, SubmissionsResponse } from '@/types/pretalx';
+import type { Break, BreakParsed, PretalxEvent, PretalxSession, ScheduleResponse, SubmissionsResponse } from '@/types/pretalx';
 import {getDate} from 'date-fns'
 
 
@@ -65,7 +65,7 @@ const shownTalks = ref<'live' | 'online'>('live')
 const { isFetching, error, data } = useFetch(props.content.url).get().json()
 const { isFetching: isFetchingSub, error: errorSub, data: dataSub } = useFetch('https://cfp.robocon.io/api/events/robocon-2025/submissions/?limit=50').get().json()
 
-const sortTalks = (talks: ScheduleResponse['slots']) => talks.sort((a, b) => new Date(a.slot.start) < new Date(b.slot.start) ? -1 : 1)
+const sortTalks = (talks: (PretalxEvent | BreakParsed)[]) => talks.sort((a, b) => new Date(a.slot.start) < new Date(b.slot.end) ? -1 : 1)
 
 const talks = computed(() => {
   if (isFetching.value || error.value) return undefined
@@ -83,10 +83,44 @@ const talks = computed(() => {
 
   const addSubmissionData = (event: PretalxEvent): PretalxEvent & PretalxSession => ({...event, ...submissions.results.find((s) => s.code === event.code)})
   return {
-    live: sortTalks(schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon').map((event) => addSubmissionData(event))),
+    live: sortTalks([
+      ...schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon').map((event) => addSubmissionData(event)),
+      ...schedule.breaks.map((b) => ({
+        ...b,
+        submission_type: {
+          en: 'Break' as const
+        },
+        title: 'Break',
+        description: b.description,
+        slot: {
+          room_id: b.room_id,
+          room: b.room,
+          start: b.start,
+          end: b.end
+        }
+      }))
+    ]),
     workshop: sortTalks(schedule.slots.filter((talk) => talk?.submission_type.en === 'Workshop - Full Day').map((event) => addSubmissionData(event))),
     tutorial: sortTalks(schedule.slots.filter((talk) => talk?.submission_type.en === 'Tutorial').map((event) => addSubmissionData(event))),
-    online: sortTalks(schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon Online' && ['PreRecorded-Talk', 'Talk', 'Keynote'].includes(talk.submission_type.en)).map((event) => addSubmissionData(event)))
+    online: sortTalks([
+      ...schedule.slots.filter((talk) => talk?.slot?.room?.en === 'RoboCon Online' && ['PreRecorded-Talk', 'Talk', 'Keynote'].includes(talk.submission_type.en)).map((event) => addSubmissionData(event)),
+      ...schedule.breaks
+      .filter(({room}) => room.en === 'RoboCon Online')
+      .map((b) => ({
+        ...b,
+        submission_type: {
+          en: 'Break' as const
+        },
+        title: 'Break',
+        description: b.description,
+        slot: {
+          room_id: b.room_id,
+          room: b.room,
+          start: b.start,
+          end: b.end
+        }
+      }))
+    ])
   }
 })
 

diff --git a/src/components/TalkItem.vue b/src/components/TalkItem.vue
@@ -1,48 +1,45 @@
 <template>
-  <article class="event mb-medium p-medium pt-none">
+  <article class="event mb-medium p-medium pt-none" :class="event.submission_type.en === 'Break' && 'break'">
     <div class="pt-xsmall pb-2xsmall flex between" style="margin-left: -0.75rem">
-      <div class="badge h-fit">
-        <template v-if="event.type === 'break'">
-          Break
-        </template>
-        <template v-else-if="event.submission_type.en !== 'Workshop - Full Day'">
+      <div v-if="event.submission_type.en !== 'Break'" class="badge h-fit">
+        <template v-if="event.submission_type.en !== 'Workshop - Full Day'">
           {{ getEventType(event.submission_type.en) }} ({{ differenceInMinutes(new Date(event.slot.end), new Date(event.slot.start)) }}min)
         </template>
         <template v-else>
           {{ getEventType(event.submission_type.en) }}
         </template>
       </div>
-      <a v-if="event.type === 'talk'" :href="`#${getSlug(event)}`">
+      <a v-if="event.submission_type.en !== 'Break'" :href="`#${getSlug((event as PretalxEvent))}`">
         <link-icon style="transform: translateY(2px)" color="black" />
       </a>
     </div>
-    <h1 v-if="event.type === 'talk'" class="mb-2xsmall" :id="getSlug(event)">
-      {{ event.title }}
+    <h1 v-if="event.submission_type.en !== 'Break'" class="mb-2xsmall" :id="getSlug(event as PretalxEvent)">
+      {{ (event as PretalxEvent).title }}
     </h1>
-    <h1 v-else-if="event.type === 'break'" class="mb-2xsmall">
-      {{ event.description }}
+    <h1 v-else-if="event.submission_type.en === 'Break'" class="mb-2xsmall">
+      {{ (event as BreakParsed).description.en }}
     </h1>
-    <div class="type-small mb-xsmall">
-      <template v-if="event.type === 'talk'">
-        {{ format(new Date(event.slot.start), 'LLL dd kk:mm') }}
-      </template>
-      <template v-else-if="event.type === 'break'">
-        {{ format(new Date(event.start), 'LLL dd kk:mm') }}
-      </template>
+    <div v-if="event.submission_type.en !== 'Break'" class="type-small mb-xsmall">
+      {{ format(new Date(event.slot.start), 'LLL dd kk:mm') }}
+    </div>
+    <div v-else>
+      {{ format(new Date(event.slot.start), 'kk:mm') }}
+      -
+      {{ format(new Date(event.slot.end), 'kk:mm') }}
     </div>
-    <div v-if="event.type === 'talk'">
-      <div v-html="renderMarkdown(event.abstract)" class="mb-small" />
+    <div v-if="event.submission_type.en !== 'Break'">
+      <div v-html="renderMarkdown((event as PretalxEvent).abstract)" class="mb-small" />
       <details v-if="event.description !== ''" class="mb-medium">
         <summary>
           More info
         </summary>
-        <div v-html="renderMarkdown(event.description)" />
+        <div v-html="renderMarkdown((event as PretalxEvent).description)" />
       </details>
     </div>
-    <div v-if="event.type === 'talk'" class="row gap-sm">
+    <div v-if="event.submission_type.en !== 'Break'" class="row gap-sm">
       <SpeakerItem
-        v-for="speaker in event.speakers"
-        :key="`${speaker.code}${event.code}`"
+        v-for="speaker in (event as PretalxEvent).speakers"
+        :key="`${speaker.code}${(event as PretalxEvent).code}`"
         :speaker="speaker" />
     </div>
   </article>
@@ -52,7 +49,7 @@
 import { format, differenceInMinutes } from 'date-fns';
 import { renderMarkdown } from 'Content/renderContent';
 import { type PropType } from 'vue'
-import type { PretalxEvent, Break } from '@/types/pretalx';
+import type { PretalxEvent, Break, BreakParsed } from '@/types/pretalx';
 import SpeakerItem from './SpeakerItem.vue'
 import LinkIcon from './icons/LinkIcon.vue'
 
@@ -63,12 +60,12 @@ const getEventType = (type: string) => {
 }
 
 const props = defineProps({
-  event: Object as PropType<PretalxEvent | Break>
+  event: Object as PropType<PretalxEvent | BreakParsed>
 })
 
 const getSlug = (event: PretalxEvent) => {
   if (!event.title) return ''
-  if (props.event.type === 'break') return
+  if (props.event.submission_type.en === 'Break') return
   const isLive = props.event.slot.room.en === 'RoboCon' || props.event.submission_type.en === 'Workshop - Full Day'
   if (isLive) return `live-${event.title.replace(/[ ]/g, '-').replace(/[^a-zA-Z0-9-]/g, '').toLowerCase()}`
   return `online-${event.title.replace(/[ ]/g, '-').replace(/[^a-zA-Z0-9-]/g, '').toLowerCase()}`
@@ -86,6 +83,10 @@ h1 {
   border-left-width: 6px;
   background-color: var(--color-background-secondary);
   /* box-shadow: -4px 0px 1px var(--color-theme); */
+
+  &.break {
+    border-color: var(--color-grey);
+  }
 }
 details {
   width: fit-content;

diff --git a/src/types/pretalx.ts b/src/types/pretalx.ts
@@ -38,7 +38,6 @@ export type PretalxEvent = {
   image: string | null;
   resources: string[];
   answers: string[];
-  type: 'talk' | 'workshop'
 };
 
 export type PretalxSession = {
@@ -73,14 +72,25 @@ export type SubmissionsResponse = {
 }
 
 export type Break = {
-  room: {
+  room?: {
       en: string;
   };
-  room_id: number;
+  room_id?: number;
   start: string; // ISO 8601 date string
   end: string;   // ISO 8601 date string
   description: {
       en: string;
   };
-  type: 'break'
+}
+
+export type BreakParsed = {
+  room?: {
+      en: string;
+  };
+  room_id?: number;
+  slot: Slot;
+  description: {
+      en: string;
+  };
+  submission_type: {en: 'Break'};
 }