diff --git a/src/layout/layout.scss b/src/layout/layout.scss index feb4953..d71d0e3 100644 --- a/src/layout/layout.scss +++ b/src/layout/layout.scss @@ -15,7 +15,7 @@ .toolbar { @media (min-width: 960px) { - max-width: 1100px; + max-width: 1200px; width: 100%; margin: auto; } diff --git a/src/pages/data-schedule.tsx b/src/pages/data-schedule.tsx new file mode 100644 index 0000000..54d2fa0 --- /dev/null +++ b/src/pages/data-schedule.tsx @@ -0,0 +1,209 @@ +import {capitalize, Typography} from "@mui/material"; +import {graphql, useStaticQuery} from "gatsby"; +import React from "react"; +import {slots} from "../../data/slots.json"; +import {Session} from "../../json_schemas/interfaces/schema_sessions"; +import {Flag} from "../components/commun/flags"; +import {PrimarySection} from "../components/commun/section/section"; +import "../layout"; +import {Helmet} from "react-helmet"; + +let copiedTimeout + +const DataPage = () => { + const {allSessionsYaml, allSpeakersYaml} = useStaticQuery(graphql` + query { + allSessionsYaml { + edges { + node { + key + room + slot + title + language + tags + speakers + talkType + } + } + } + allSpeakersYaml { + edges { + node { + key + name + } + } + } + } + `); + + type SessionComplete = Session & { hour: string; speakersNames: string[] }; + const talksByDay: Array> = [[], []]; + allSessionsYaml.edges.forEach((e) => { + const session = e.node as SessionComplete; + session.speakersNames = session.speakers.map( + (s) => allSpeakersYaml.edges.find((es) => es.node.key === s)?.node?.name + ); + const day = session.slot.startsWith("day-1") ? 0 : 1; + session.hour = slots.find((s) => s.key === session.slot)?.start as string; + talksByDay[day].push(session); + }); + + const ordreSalles = ["Jules Verne", "Titan", "Belem", "Tour de Bretagne", "Les Machines", "Hangar", "L'Atelier"] + + const versionSexy = [ + { + "id": "mobile", + "label": "📱 Mobile" + }, + { + "id": "iot_hardware", + "label": "\uD83D\uDCDF IoT & Hardware" + }, + { + "id": "web", + "label": "🌍 Web" + }, + { + "id": "discovery", + "label": "💡 Discovery" + }, + { + "id": "cloud_devops", + "label": "☁️ Cloud & DevOps" + }, + { + "id": "languages", + "label": "📝 Languages" + }, + { + "id": "bigdata_ai", + "label": "🤖 BigData & AI" + }, + { + "id": "security", + "label": "🐱‍💻 SECURITY" + }, + { + "id": "ux_ui", + "label": "💚 UX / UI" + } + ] + + + const copy = (x) => { + navigator.clipboard.writeText(x); + const delay = document.getElementById("copied").style.visibility === 'visible' ? 100 : 0; + document.getElementById("copied").style.visibility = 'hidden' + clearTimeout(copiedTimeout) + setTimeout(() => { + document.getElementById("copied").style.visibility = 'visible' + copiedTimeout = setTimeout(() => { + document.getElementById("copied").style.visibility = 'hidden' + }, 1000) + }, delay) + }; + return ( + <> + + + + +
+ copied +
+ + {talksByDay.map((tbd, i) => ( + <> + {i == 0 ? "Jeudi" : "Vendredi"} +
+
+ {tbd + .sort((s1, s2) => { + const sortHeures = s1.hour?.localeCompare(s2.hour); + const sortSalles = ordreSalles.indexOf(s1.room) - ordreSalles.indexOf(s2.room) + return sortHeures !== 0 ? sortHeures : sortSalles + }) + .map((session) => ( +
+ {session.hour} + copy(session.title)} + variant="h3" + className={"clickable"} + > + {session.title} + + {session.speakersNames.map((s) => ( + copy(session.speakersNames.join('\n'))} + > + {s} + + ))} +

copy(versionSexy.find(t => t.id === session.tags[0]).label)} + >{versionSexy.find(t => t.id === session.tags[0]).label}

+

copy(capitalize(session.talkType))} + >{capitalize(session.talkType)}

+

copy(session.room)} + > + {session.room} +

+ +
+ ))} +
+
+
+
+
+
+ + ))} +
+ + ); +}; + +export default DataPage;