phc
/
orario
6
2
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

New vertical layout

Browse Source
pull/1/head
Antonio De Lucreziis 2 years ago
parent 19bea2f48f
commit 45cd07fa85
5 changed files with 348 additions and 66 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="/src/styles/main.scss">

172
src/components/EventsView.jsx
Unescape Escape View File

@ -6,7 +6,7 @@ import { differenceInMinutes, format, getWeek, startOfDay } from 'date-fns'
import { it } from 'date-fns/locale'
import _ from 'lodash'
import { useEffect, useRef } from 'preact/hooks'
import { useEffect, useRef, useState } from 'preact/hooks'
import { layoutIntervals } from '../interval-layout.js'
function hashString(str, seed = 0) {
@ -36,12 +36,10 @@ const WorkWeekView = ({ events }) => {
)
)
console.log(rowLayouts)
const weekDays = ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì']
return (
<div class="workweek-view">
<div class="work-week-h-view">
<div class="week">
{weekDays.map((label, index) => (
<div class="day" style={{ '--size': rowLayouts[index + 1]?.length ?? 0 }}>
@ -126,52 +124,136 @@ const WorkWeekView = ({ events }) => {
)
}
/*
{sortedKeys.map(blockStart => (
<div
class="stacked"
style={{
'--start':
differenceInMinutes(
stacked[blockStart][0].start,
startOfDay(stacked[blockStart][0].start)
) -
60 * 8,
}}
>
{stacked[blockStart].map(event => (
<Event {...event} />
))}
</div>
))}
{Object.values(eventsByWeekday).map(dayEvents => {
const WorkWeekVerticalView = ({ events }) => {
const eventsByWeekday = _.groupBy(events, event => event.start.getDay())
const dayIntervalLayout = _.mapValues(eventsByWeekday, events =>
layoutIntervals(
events.map(e => ({
start: differenceInMinutes(e.start, startOfDay(e.start)),
end: differenceInMinutes(e.end, startOfDay(e.start)),
data: e,
}))
)
)
const weekDays = ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì']
const [currentlyHovered, setCurrentlyHovered] = useState(null)
const element = useRef()
useEffect(() => {
if (element.current) {
const l = e => {
const $event = e.target.closest('.event')
if ($event) {
setCurrentlyHovered($event.dataset.eventId)
} else {
setCurrentlyHovered(null)
}
}
element.current.addEventListener('mousemove', l)
return () => {
element.current.removeEventListener('mousemove', l)
}
}
}, [element.current])
return (
<div class="day">
{dayEvents.map(({ name, start, end }) => {
return (
<div class="work-week-v-view" ref={element}>
<div class="pivot"></div>
<div class="left-header">
<div class="blocks">
<div
class="block skip-border"
style={{
'--start': 9 - 7,
'--size': 2,
}}
>
9:00 &ndash; 11:00
</div>
<div
class="block"
style={{
'--start': 11 - 7,
'--size': 2,
}}
>
11:00 &ndash; 13:00
</div>
<div
class="block skip-border"
style={{
'--start': 14 - 7,
'--size': 2,
}}
>
14:00 &ndash; 16:00
</div>
<div
class="event"
class="block"
style={{
'--hue':
(Math.abs(hashString('seed3' + name)) % 360) +
'deg',
'--start':
differenceInMinutes(start, startOfDay(start)) -
60 * 8,
'--size': differenceInMinutes(end, start),
'--start': 16 - 7,
'--size': 2,
}}
>
{_.startCase(_.lowerCase(name))
.replaceAll('Ii', 'II')
.replaceAll('Iii', 'III')}
16:00 &ndash; 18:00
</div>
)
})}
</div>
</div>
{Object.values(dayIntervalLayout).map((layout, index) => (
<div class="day" style={{ '--size': layout.length }}>
<div class="top-header">{weekDays[index]}</div>
<div class="events">
{layout.map((events, stackIndex) => (
<>
{events.map(event => (
<div
class={
'event' +
(currentlyHovered === event.data.name
? ' highlight'
: '')
}
data-event-id={event.data.name}
style={{
'--start': event.start / 60 - 7,
'--stack': stackIndex + 1,
'--size': (event.end - event.start) / 60,
'--hue':
(Math.abs(hashString('seed3' + event.data.name)) %
360) +
'deg',
}}
>
<div class="title">
{_.startCase(_.lowerCase(event.data.name))
.replaceAll('Ii', 'II')
.replaceAll('Iii', 'III')
.replaceAll(/\bE\b/g, 'e')}
</div>
<div class="aula">{event.data.aula}</div>
</div>
))}
</>
))}
{/* Grid Tracks */}
{[1, 3, 5].map(i => (
<div class="grid-line-h" style={{ '--track': i }}></div>
))}
{[6, 8, 10].map(i => (
<div class="grid-line-h" style={{ '--track': i }}></div>
))}
</div>
</div>
))}
</div>
)
})}
*/
}
const CourseView = ({ events }) => {
const eventsByCourse = _.groupBy(events, 'name')
@ -183,7 +265,8 @@ const CourseView = ({ events }) => {
<div class="title">
{_.startCase(_.lowerCase(name))
.replaceAll('Ii', 'II')
.replaceAll('Iii', 'III')}
.replaceAll('Iii', 'III')
.replaceAll(/\bE\b/g, 'e')}
</div>
<div class="docenti">{courseEvents[0].docenti.join(', ')}</div>
<div class="events">
@ -207,7 +290,8 @@ const CourseView = ({ events }) => {
//
const viewModeMap = {
'work-week': WorkWeekView,
'work-week-h': WorkWeekView,
'work-week-v': WorkWeekVerticalView,
'course': CourseView,
}

25
src/components/Toolbar.jsx
Unescape Escape View File

@ -1,3 +1,5 @@
import { Icon } from './Icon.jsx'
export const Toolbar = ({ mode, setMode }) => {
return (
<div class="toolbar">
@ -12,16 +14,29 @@ export const Toolbar = ({ mode, setMode }) => {
Corso
</button>
<button
class={'radio' + (mode === 'work-week' ? ' selected' : '')}
onClick={() => setMode('work-week')}
class={'radio' + (mode === 'work-week-v' ? ' selected' : '')}
onClick={() => setMode('work-week-v')}
>
Settimana
</button>
<button
class={'radio' + (mode === 'work-week-h' ? ' selected' : '')}
onClick={() => setMode('work-week-h')}
>
Settimana<sup>T</sup>
</button>
</div>
</div>
<div class="item option">Opzione 2</div>
<div class="item option">Opzione 3</div>
<div class="item option">Opzione 4</div>
<div class="item option">
<button class="icon">
<Icon name="filter_list" />
</button>
</div>
<div class="item option">
<button class="icon">
<Icon name="print" />
</button>
</div>
</div>
</div>
)

4
src/main.jsx
Unescape Escape View File

@ -5,8 +5,6 @@ import { useEffect, useState } from 'preact/hooks'
import { EventsView } from './components/EventsView.jsx'
import { Toolbar } from './components/Toolbar.jsx'
window._ = _
const App = ({}) => {
const [eventi, setEventi] = useState([])
useEffect(() => {
@ -40,7 +38,7 @@ const App = ({}) => {
})
}, [])
const [mode, setMode] = useState('work-week')
const [mode, setMode] = useState('work-week-v')
return (
<>

211
src/styles/main.scss
Unescape Escape View File

@ -15,9 +15,11 @@ html {
:root {
--gray-000: #ffffff;
--gray-100: #f8f8f8;
--gray-300: #f0f0f0;
--gray-350: #e8e8e8;
--gray-500: #d8d8d8;
--gray-600: #c0c0c0;
--gray-900: #282828;
// --accent-100: #e6ceff;
@ -29,12 +31,18 @@ html {
--accent-500: hsl(221, 70%, 75%);
}
$device-s-width: 480px;
// Elements
code {
font-size: 90%;
}
sup {
padding-bottom: 0.5rem;
}
button,
.button {
display: flex;
@ -61,6 +69,10 @@ button,
inset: 0;
background: #00000008;
}
&.icon {
padding: 0.5rem;
}
}
// Components
@ -73,12 +85,18 @@ button,
border-radius: 0;
border-right: none;
padding: inherit 0.5rem;
&:first-child {
padding-left: 1rem;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
&:last-child {
padding-right: 1rem;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border: 2px solid var(--gray-350);
@ -133,10 +151,6 @@ body {
gap: 0.5rem;
}
.item {
padding: 0.5rem;
}
}
.events-view {
@ -185,7 +199,7 @@ body {
}
}
.workweek-view {
.work-week-h-view {
--header-height: 3rem;
--event-height: 2rem;
@ -234,7 +248,7 @@ body {
display: grid;
grid-template-rows: auto 1fr;
--hour-width: 7rem;
--hour-width: 7.5rem;
.header {
display: grid;
@ -282,16 +296,20 @@ body {
grid-row: var(--row) / span 1;
grid-column: var(--start) / span var(--size);
background: hsl(var(--hue), 90%, 60%);
// $color: hsl(var(--hue), 80%, 60%);
$color: var(--gray-000);
background: $color;
color: #000;
border-radius: 0.25rem;
border: 1px solid var(--gray-600);
display: flex;
padding: 0.4rem;
font-size: 15px;
// font-weight: 500;
width: 100%;
@ -309,11 +327,7 @@ body {
border-radius: 0.25rem;
background: linear-gradient(
to top,
hsl(var(--hue), 90%, 60%) 0%,
transparent 25%
);
background: linear-gradient(to top, $color 0%, transparent 25%);
}
&:hover {
@ -340,6 +354,177 @@ body {
}
}
}
.work-week-v-view {
position: relative;
display: grid;
grid-template-columns: max-content repeat(5, auto);
height: 100%;
overflow: scroll;
.pivot {
height: 3rem;
grid-column: 1 / 2;
grid-row: 1 / 2;
position: sticky;
top: 0;
left: 0;
z-index: 2;
background: var(--gray-000);
border-bottom: 1px solid var(--gray-500);
border-right: 1px solid var(--gray-500);
}
.left-header {
grid-column: 1 / 2;
grid-row: 1 / 2;
display: grid;
position: sticky;
left: 0;
border-right: 1px solid var(--gray-500);
background: var(--gray-000);
z-index: 1;
padding-top: 3rem;
.blocks {
display: grid;
grid-template-rows: repeat(12, 6rem);
.block {
grid-row: var(--start) / span var(--size);
display: grid;
place-content: center;
padding: 0.5rem;
font-size: 16px;
font-weight: 400;
border-top: 1px solid var(--gray-500);
@media screen and (max-width: $device-s-width) {
writing-mode: vertical-lr;
}
&:not(.skip-border) {
height: calc(2 * 6rem + 1px);
border-bottom: 1px solid var(--gray-500);
}
}
}
}
.day {
position: relative;
display: flex;
flex-direction: column;
.top-header {
position: sticky;
top: 0;
height: 3rem;
flex: 0 0 auto;
z-index: 1;
grid-column: span var(--size);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 400;
background: var(--gray-000);
border-bottom: 1px solid var(--gray-500);
}
&:not(:last-child) {
border-right: 1px solid var(--gray-500);
}
.events {
position: relative;
display: grid;
grid-template-columns: repeat(var(--size), auto);
grid-template-rows: repeat(12, 5rem);
padding: 0.5rem;
gap: 1rem 0.5rem;
.event {
grid-row: var(--start) / span var(--size);
grid-column: var(--stack) / span 1;
background: var(--gray-000);
border: 1px solid var(--gray-600);
// border: 4px solid hsl(var(--hue), 80%, 80%);
border-radius: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.5rem 1rem 0.5rem 0.5rem;
&.highlight {
background: var(--gray-100);
border-color: var(--gray-500);
}
.title {
font-size: 18px;
font-weight: 400;
}
.aula {
font-size: 16px;
font-weight: 300;
}
}
.grid-line-h {
grid-column: 1 / span var(--size);
grid-row: var(--track) / span 2;
height: 0px;
border-bottom: 1px dashed var(--gray-500);
align-self: center;
position: relative;
left: -0.5rem;
width: calc(100% + 1rem);
z-index: -1;
}
}
}
}
}
// Utilities

Write Preview
Loading…
Cancel
Save