From 7736ab55336c710d99708806596a870292bcba8b Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Fri, 9 Sep 2022 18:46:36 +0200 Subject: [PATCH] Prima release --- .gitignore | 3 + package.json | 1 + pnpm-lock.yaml | 6 + public/logo-circuit-board.svg | 87 +++++++++++++ src/components/ComboBox.jsx | 25 ++-- src/components/CompoundButton.jsx | 16 +++ src/components/HamburgerMenu.jsx | 27 +++- src/components/Icon.jsx | 6 +- src/components/Popup.jsx | 17 +++ src/components/Toolbar.jsx | 99 ++++++--------- src/main.jsx | 195 +++++++++++++++++++++------- src/styles/main.scss | 202 +++++++++++++++++++++++++++--- src/utils.jsx | 7 ++ vite.config.js | 21 +++- 14 files changed, 568 insertions(+), 144 deletions(-) create mode 100644 public/logo-circuit-board.svg create mode 100644 src/components/CompoundButton.jsx create mode 100644 src/components/Popup.jsx create mode 100644 src/utils.jsx diff --git a/.gitignore b/.gitignore index 93a61dc..c82b61e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,6 @@ dist/ node_modules/ *.local* + +.env +.env.production diff --git a/package.json b/package.json index f90d9f9..fb5bcca 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dependencies": { "date-fns": "^2.29.2", "lodash": "^4.17.21", + "lodash-es": "^4.17.21", "preact": "^10.10.6", "sass": "^1.54.8", "vite": "^3.0.9" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 31fd7e1..a0c038f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,7 @@ specifiers: '@preact/preset-vite': ^2.3.0 date-fns: ^2.29.2 lodash: ^4.17.21 + lodash-es: ^4.17.21 preact: ^10.10.6 sass: ^1.54.8 vite: ^3.0.9 @@ -12,6 +13,7 @@ specifiers: dependencies: date-fns: 2.29.2 lodash: 4.17.21 + lodash-es: 4.17.21 preact: 10.10.6 sass: 1.54.8 vite: 3.0.9_sass@1.54.8 @@ -777,6 +779,10 @@ packages: resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==} dev: true + /lodash-es/4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + dev: false + /lodash/4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} dev: false diff --git a/public/logo-circuit-board.svg b/public/logo-circuit-board.svg new file mode 100644 index 0000000..1e65c1c --- /dev/null +++ b/public/logo-circuit-board.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ComboBox.jsx b/src/components/ComboBox.jsx index e7edfaa..7abf13d 100644 --- a/src/components/ComboBox.jsx +++ b/src/components/ComboBox.jsx @@ -1,19 +1,28 @@ -import { useRef } from 'preact/hooks' +import { useRef, useState } from 'preact/hooks' import { Icon } from './Icon.jsx' -export const ComboBox = ({ selected, options }) => { +let ids = 0 + +function generateId() { + return 'combo-id-' + ids++ +} + +export const ComboBox = ({ options, value, setValue }) => { + const [uid] = useState(() => generateId()) const selectRef = useRef() return ( -
selectRef.current?.click()}> - setValue(e.target.value)}> + {options.map(option => ( + ))} - +
) } diff --git a/src/components/CompoundButton.jsx b/src/components/CompoundButton.jsx new file mode 100644 index 0000000..11612ea --- /dev/null +++ b/src/components/CompoundButton.jsx @@ -0,0 +1,16 @@ +import { withClasses } from '../utils.jsx' + +export const CompoundButton = ({ options, value, setValue }) => { + return ( +
+ {options.map(option => ( + + ))} +
+ ) +} diff --git a/src/components/HamburgerMenu.jsx b/src/components/HamburgerMenu.jsx index 2a083d3..beaa598 100644 --- a/src/components/HamburgerMenu.jsx +++ b/src/components/HamburgerMenu.jsx @@ -1,7 +1,7 @@ import { ComboBox } from './ComboBox.jsx' import { Icon } from './Icon.jsx' -export const HamburgerMenu = ({ onClose }) => { +export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) => { return (
@@ -11,12 +11,29 @@ export const HamburgerMenu = ({ onClose }) => {
+
Gruppo Corsi
+
Visualizzazione
+
diff --git a/src/components/Icon.jsx b/src/components/Icon.jsx index 5eef24c..559616c 100644 --- a/src/components/Icon.jsx +++ b/src/components/Icon.jsx @@ -1 +1,5 @@ -export const Icon = ({ name }) => {name} +export const Icon = ({ name, ...rest }) => ( + + {name} + +) diff --git a/src/components/Popup.jsx b/src/components/Popup.jsx new file mode 100644 index 0000000..e72c694 --- /dev/null +++ b/src/components/Popup.jsx @@ -0,0 +1,17 @@ +import { Icon } from './Icon.jsx' + +export const Popup = ({ title, children, onClose }) => { + return ( +
+
+
+
{title}
+ +
+
{children}
+
+
+ ) +} diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 76fec24..1ff3c97 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -1,6 +1,7 @@ +import { CompoundButton } from './CompoundButton.jsx' import { Icon } from './Icon.jsx' -export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu }) => { +export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp }) => { return (
@@ -8,72 +9,54 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu }) => {
- +
-
- - - - - {/* TODO: Aggiungere il pulsante per "tutti" */} - {/* */} -
-
-
-
- - - -
+
-
+
+
+
+ +
) diff --git a/src/main.jsx b/src/main.jsx index 9ff9eaa..8aa8e1d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -5,68 +5,84 @@ import { ToolOverlay } from './components/CourseVisibility.jsx' import { EventsView } from './components/EventsView.jsx' import { HamburgerMenu } from './components/HamburgerMenu.jsx' +import { Icon } from './components/Icon.jsx' +import { Popup } from './components/Popup.jsx' import { Toolbar } from './components/Toolbar.jsx' -window._ = _ -window.dataBuffer = {} +// window._ = _ +// window.dataBuffer = {} const CALENDAR_IDS = { - 'anno-1': '6308cfcb1df5cb026699ce32', - 'anno-2': '6308e2dc09352a0208fefdd9', - 'anno-3': '6308e42a1df5cb026699ced4', - 'magistrale': '6308e8ea0c34e703bb1f7e85', + 'anno-1': ['6308cfcb1df5cb026699ce32'], + 'anno-2': ['6308e2dc09352a0208fefdd9'], + 'anno-3': ['6308e42a1df5cb026699ced4'], + 'magistrale': ['6308e8ea0c34e703bb1f7e85'], + 'tutti': [ + '6308cfcb1df5cb026699ce32', + '6308e2dc09352a0208fefdd9', + '6308e42a1df5cb026699ced4', + '6308e8ea0c34e703bb1f7e85', + ], +} + +async function loadEventi(ids) { + const calendari = await Promise.all( + ids.map(async id => { + // Almost directly copy-pasted from Chrome Dev Tools + const req = await fetch( + 'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico', + { + headers: { + 'content-type': 'application/json;charset=UTF-8', + 'sec-fetch-dest': 'empty', + 'sec-fetch-mode': 'cors', + 'sec-fetch-site': 'same-site', + }, + body: JSON.stringify({ + mostraImpegniAnnullati: true, + mostraIndisponibilitaTotali: false, + linkCalendarioId: id, + clienteId: '628de8b9b63679f193b87046', + pianificazioneTemplate: false, + dataInizio: '2022-10-02T22:00:00.000Z', + dataFine: '2022-10-07T22:00:00.000Z', + }), + method: 'POST', + mode: 'cors', + credentials: 'omit', + } + ) + + return await req.json() + }) + ) + + console.log(calendari) + + if (ids.length === 1) { + return calendari[0] + } + + return _.uniqBy(_.concat(...calendari), 'id') } const App = ({}) => { const [source, setSource] = useState('magistrale') - const [eventi, setEventi] = useState([]) - const [selectedCourses, setSelectedCourses] = useState([]) useEffect(() => { setSelectedCourses([]) }, [source]) - useEffect(() => { - // Directly copy-pasted from chrome Dev Tools - const request = fetch( - 'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico', - { - headers: { - 'content-type': 'application/json;charset=UTF-8', - 'sec-fetch-dest': 'empty', - 'sec-fetch-mode': 'cors', - 'sec-fetch-site': 'same-site', - }, - body: JSON.stringify({ - mostraImpegniAnnullati: true, - mostraIndisponibilitaTotali: false, - linkCalendarioId: CALENDAR_IDS[source], - clienteId: '628de8b9b63679f193b87046', - pianificazioneTemplate: false, - dataInizio: '2022-10-02T22:00:00.000Z', - dataFine: '2022-10-07T22:00:00.000Z', - }), - method: 'POST', - mode: 'cors', - credentials: 'omit', - } - ) - - // const request = fetch('/data.json') - - console.time('loading eventi') - - request - .then(res => res.json()) - .then(data => { - console.timeEnd('loading eventi') - window.dataBuffer[source] = data - setEventi(data) - }) + useEffect(async () => { + const eventi = await loadEventi(CALENDAR_IDS[source]) + // window.dataBuffer[source] = eventi + setEventi(eventi) }, [source]) + const [helpVisible, setHelpVisible] = useState(false) + const [mode, setMode] = useState('course') const [hideOtherCourses, setHideOtherCourses] = useState(false) @@ -76,7 +92,7 @@ const App = ({}) => { setHideOtherCourses(false) } - const [showMobileMenu, setShowMobileMenu] = useState(true) + const [showMobileMenu, setShowMobileMenu] = useState(false) return ( <> @@ -87,6 +103,7 @@ const App = ({}) => { source, setSource, onShowMenu: () => setShowMobileMenu(true), + onHelp: () => setHelpVisible(true), }} /> { )} {showMobileMenu && ( { - setShowMobileMenu(false) + {...{ + mode, + setMode, + source, + setSource, + onClose: () => { + setShowMobileMenu(false) + }, }} /> )} + {helpVisible && ( + + Aiuto + + } + onClose={() => setHelpVisible(false)} + > +

Titolo

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

Sottotitolo

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

Sottotitolo

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

Sottosottotitolo

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

Sottosottotitolo

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique eum + pariatur amet. Laborum quos repudiandae corrupti, exercitationem cum labore + doloribus. +

+ + )} ) } diff --git a/src/styles/main.scss b/src/styles/main.scss index 4e9d08c..9d77289 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -38,7 +38,7 @@ html { --accent-900: #244624; } -$device-s-width: 480px; +$device-s-width: 420px; // Elements @@ -51,12 +51,43 @@ sup { transform: translate(0, -0.25rem); } +// Headings + +$base-font-size: 18px; +$heading-scale: 1.25; + +@function pow($number, $exponent) { + $value: 1; + + @if $exponent > 0 { + @for $i from 1 through $exponent { + $value: $value * $number; + } + } + + @return $value; +} + +@for $i from 1 through 4 { + h#{$i} { + margin: 0; + + $factor: pow($heading-scale, 4 - $i); + font-size: $base-font-size * $factor; + font-weight: 500; + + line-height: 1.5; + } +} + button, .button { display: flex; align-items: center; justify-content: center; + gap: 0.25rem; + background: var(--gray-000); border: 2px solid var(--gray-350); border-radius: 0.5rem; @@ -94,11 +125,15 @@ button, &.icon { padding: 0.5rem; } + + &.flat { + border: none; + } } .input-combo { display: flex; - align-items: center; + // align-items: center; justify-content: center; height: 3rem; @@ -109,15 +144,13 @@ button, font-weight: 400; - padding: 0.5rem 0.5rem 0.5rem 1rem; + // padding: 0.5rem 0.5rem 0.5rem 1rem; user-select: none; cursor: pointer; position: relative; - gap: 0.5rem; - select { border: none; background: none; @@ -125,14 +158,92 @@ button, font-family: inherit; font-size: inherit; + font-weight: 300; + + height: 100%; + padding-left: 1rem; + padding-right: 3rem; + + width: 100%; + } + + .icon { + position: absolute; + right: 0; + + height: 100%; + width: calc(3rem - 4px); + + display: grid; + place-content: center; + + pointer-events: none; } } // Components +.popup-container { + position: absolute; + inset: 0; + + z-index: 10; + + background: #00000099; + + max-width: 100%; + + .popup { + @extend .panel; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + gap: 1rem; + + box-shadow: 0 0 1.5rem #00000033; + + .header { + display: flex; + align-items: center; + justify-content: space-between; + + user-select: none; + + .title { + display: flex; + align-items: center; + gap: 0.5rem; + + font-size: 24px; + } + } + + .content { + @extend .text-block; + + width: 60ch; + max-width: 100%; + max-height: 60vh; + + overflow-y: auto; + } + + max-width: 100%; + } +} + .compound { display: flex; + .material-symbols-outlined { + font-size: 20px; + } + button, .button { border-radius: 0; @@ -175,6 +286,8 @@ button, } } +// Extension Classes + .panel { background: var(--gray-000); border: 1px solid var(--gray-500); @@ -182,6 +295,12 @@ button, padding: 1rem; } +.text-block { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + // Structure body { @@ -190,6 +309,8 @@ body { font-weight: 300; font-family: 'Inter', sans-serif; + + position: relative; } .toolbar { @@ -213,10 +334,22 @@ body { gap: 1rem; - @media screen and (max-width: $device-s-width) { + @media screen and (max-width: $device-s-width) and (orientation: portrait), + screen and (max-height: $device-s-width) and (orientation: landscape) { display: none; } } + + .logo { + display: flex; + align-items: center; + + img { + max-height: 2.5rem; + } + + gap: 0.25rem; + } } .events-view { @@ -254,6 +387,8 @@ body { position: relative; + cursor: pointer; + &.selected { background: var(--gray-100); @@ -308,6 +443,10 @@ body { .day { box-sizing: content-box; + // @media screen and (max-width: $device-s-width) { + // writing-mode: vertical-lr; + // } + height: calc(var(--size) * var(--event-height) + (var(--size) - 1) * 0.25rem); border-top: 1px solid var(--gray-500); @@ -452,7 +591,7 @@ body { overflow: scroll; - --event-height: 4.25rem; + --event-height: 4.75rem; .pivot { height: 3rem; @@ -507,7 +646,8 @@ body { border-top: 1px solid var(--gray-500); - @media screen and (max-width: $device-s-width) { + @media screen and (max-width: $device-s-width) and (orientation: portrait), + screen and (max-height: $device-s-width) and (orientation: landscape) { writing-mode: vertical-lr; } @@ -658,7 +798,9 @@ body { } // not on mobile -@media screen and (min-width: $device-s-width) { + +@media screen and (min-width: $device-s-width) and (orientation: portrait), + screen and (min-height: $device-s-width) and (orientation: landscape) { .mobile { display: none; } @@ -669,20 +811,19 @@ body { } // on mobile -@media screen and (max-width: $device-s-width) { + +@media screen and (max-width: $device-s-width) and (orientation: portrait), + screen and (max-height: $device-s-width) and (orientation: landscape) { .toolbar { padding: 0.75rem 1rem 0.75rem 0.75rem; } - button { - &.flat { - border: none; - } - } - .menu { position: absolute; - inset: 0; + top: 0; + left: 0; + width: 100vw; + height: 100vh; background: var(--gray-000); @@ -703,13 +844,36 @@ body { .options { padding: 1rem; - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: auto 1fr; + + gap: 1rem; + align-items: center; + + .label { + font-weight: 400; + } } } } +@media print { + // @page { + // size: A4 landscape; + // } + + .toolbar, + .menu, + .overlay { + display: none; + } + + .work-week-v-view { + overflow: visible; + } +} + @keyframes fade-in { 0% { opacity: 0; diff --git a/src/utils.jsx b/src/utils.jsx new file mode 100644 index 0000000..41f473f --- /dev/null +++ b/src/utils.jsx @@ -0,0 +1,7 @@ +export const withClasses = classes => + Array.isArray(classes) + ? classes.filter(e => !!e).join(' ') + : Object.entries(classes) + .filter(([, value]) => value) + .map(([key]) => key) + .join(' ') diff --git a/vite.config.js b/vite.config.js index ce8f548..f5f5bc3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,10 +1,21 @@ import { defineConfig } from 'vite' import preact from '@preact/preset-vite' +import { loadEnv } from 'vite' -export default defineConfig({ - server: { - port: 3000, - }, - plugins: [preact()], +export default defineConfig(({ mode }) => { + console.log(`Build Mode: "${mode}"`) + + const env = loadEnv(mode, process.cwd(), '') + + return { + base: mode === 'development' ? '/' : env.BASE_URL, + server: { + port: 3000, + }, + plugins: [preact()], + esbuild: { + logOverride: { 'this-is-undefined-in-esm': 'silent' }, + }, + } })