Skip to content

Commit

Permalink
add: tabulated schedules
Browse files Browse the repository at this point in the history
  • Loading branch information
@domysh
domysh committed Sep 18, 2024
1 parent 888172d commit 37e8bdc
Show file tree
Hide file tree
Showing 2 changed files with 224 additions and 166 deletions.
210 changes: 44 additions & 166 deletions src/components/Schedule/Pages/ScheduleList.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,179 +3,57 @@
import ScheduleCard from "../ScheduleCard.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
import { getSchedule } from "../../../data/api/sessionize_api";
import ScheduleTab from "./ScheduleTab.astro";
/*
- 51235:"Frontend"
- 51236:"Mobile"
- 51237:"Cloud"
- 53346:"Soft skill"
- 53347:"AI"
- 53348:"WS I"
- 53349:"WS II"
- 53350:"WS III"
*/
const schedule = await getSchedule()
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const tab1Rooms = [51235, 51236, 51237, 53347, 53346];
const tab2Rooms = [53348, 53349, 53350];
---
<div class="text-white">


{
schedule.map((s) => {
const totalScheduleCols = s.rooms.length;
const totalScheduleRows = s.timeSlots.length;
let skipPadding: {[key:string]:number} = s.rooms.map((room) => ({[room.id]:0})).reduce((a,b)=>({...a,...b}),{})
return (
<div class="mb-5">
<p class="text-3xl font-bold mb-5">
{new Date(s.date).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
weekday: "long",
})}
</p>
{/* Some classes are created manually due to tilewind issues */}
<div class={`grid grid-flow-row grid-cols-layout-${totalScheduleCols} grid-rows-layout-${totalScheduleRows} grid-cols-1 gap-4`} >
{s.timeSlots.map((ts,ts_idx) => {

const hasServiceSession = ts.rooms.some(
(tsr) => tsr.session.isServiceSession,
);

const sessionsInTimeSlot = ts.rooms.map((tsr) => {
const endDate = new Date(tsr.session.endsAt);
endDate.setSeconds(0)
endDate.setMilliseconds(0)
const slots = !hasServiceSession? (
//Function that calculate the rows to take for this session
(()=>{
//Calculate the space to take (how many timeSlot takes this session (until a service session))
let session_len = 1
let last_is_service = false
for (let i = ts_idx+1; i < s.timeSlots.length; i++){
//No sessions
if (s.timeSlots[i].rooms.length == 0) continue
//Take time from one of the sessions
//Get next start date
const next_date = new Date(s.timeSlots[i].rooms[0].session.startsAt)
next_date.setSeconds(0)
next_date.setMilliseconds(0)
//If it's a service session, can't take this space
if (s.timeSlots[i].rooms.some( (tsr) => tsr.session.isServiceSession)){
last_is_service = true
continue //We need to check if replicate this session for the next timeSlot that is not a service session
}
if (last_is_service){ //We stopped at a service session and need to check if replicate this session in next timeSlots
if (next_date < endDate){
s.timeSlots[i].rooms.push(tsr) //Replicate
}
break
}
//Continue to get space until this session ends
if (next_date < endDate){
session_len ++
}else{
break
}
}
return session_len
})()
) : 1;
if (slots > 1){
skipPadding[tsr.id.toString()] = slots-1
}
return {
data: tsr,
html: <div class={`xl:col-span-${ hasServiceSession ? totalScheduleCols : 1 } row-span-${slots}`}>
<ScheduleCard value={tsr} />
</div>
};
});

const orderedSessions = (
!hasServiceSession?
s.rooms.map(
(room) => {
let session = sessionsInTimeSlot.find((target) => room.id == target.data.id)
if (!session){
if (skipPadding[room.id.toString()]){
skipPadding[room.id.toString()]--
return null
}
return <div />
}
return session?.html
}
).filter((ele)=>ele!=null) : sessionsInTimeSlot.map((session) => session.html)
)

return [
<div class="font-medium text-2xl">
<p>{ts.slotStart.substring(0, 5)}</p>
</div>,
...orderedSessions
];
})}
</div>
</div>
);
})
}
<div role="tablist" class="tabs tabs-boxed bg-transparent w-full tabs-lg mt-[-20px]">
<input
type="radio"
name="schedule_tabs"
role="tab"
class="tab text-white rounded-md"
aria-label="Talks"
checked="checked"
/>
<div role="tabpanel" class="tab-content mt-3">
<ScheduleTab schedule={schedule} rooms={tab1Rooms} />
</div>

<input
type="radio"
name="schedule_tabs"
role="tab"
class="tab text-white rounded-xl"
aria-label="Workshops"
/>
<div role="tabpanel" class="tab-content mt-3">
<ScheduleTab schedule={schedule} rooms={tab2Rooms} />
</div>
</div>

{schedule.length == 0?<h3 class="underline">{t("scheduling.noschedule")}</h3>:null}
<style>
@media (min-width: 1280px) {
.grid-cols-layout-1 {
grid-template-columns: 90px repeat(1, minmax(0, 1fr));
}
.grid-rows-layout-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-cols-layout-2 {
grid-template-columns: 90px repeat(2, minmax(0, 1fr));
}
.grid-rows-layout-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-cols-layout-3 {
grid-template-columns: 90px repeat(3, minmax(0, 1fr));
}
.grid-rows-layout-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-cols-layout-4 {
grid-template-columns: 90px repeat(4, minmax(0, 1fr));
}
.grid-rows-layout-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-cols-layout-5 {
grid-template-columns: 90px repeat(5, minmax(0, 1fr));
}
.grid-rows-layout-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-cols-layout-6 {
grid-template-columns: 90px repeat(6, minmax(0, 1fr));
}
.grid-rows-layout-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid-cols-layout-7 {
grid-template-columns: 90px repeat(7, minmax(0, 1fr));
}
.grid-rows-layout-7 {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid-cols-layout-8 {
grid-template-columns: 90px repeat(8, minmax(0, 1fr));
}
.grid-rows-layout-8 {
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid-cols-layout-9 {
grid-template-columns: 90px repeat(9, minmax(0, 1fr));
}
.grid-rows-layout-9 {
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid-cols-layout-10 {
grid-template-columns: 90px repeat(10, minmax(0, 1fr));
}
.grid-rows-layout-10 {
grid-template-rows: repeat(10, minmax(0, 1fr));
}
}
</style>

</div>
Loading

0 comments on commit 37e8bdc

Please sign in to comment.