Some adjustments

README.md

@@ -10,6 +10,18 @@ You need to have installed `node` and `npm` (or `pnpm`). To setup the project ju
 
 To start the development server run `npm run dev`.
 
+#### Prettier Options
+
+```json
+"prettier.printWidth": 100,
+"prettier.singleQuote": true,
+"prettier.quoteProps": "consistent",
+"prettier.tabWidth": 4,
+"prettier.semi": false,
+"prettier.arrowParens": "avoid",
+"editor.formatOnSave": true,
+```
+
 ### Production
 
 To build the ViteJS project run `npm run build`, for deployment a `.env` files can be used to set the `BASE_URL` variable.

src/components/view/WorkWeekGrid.jsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import _ from 'lodash'
 import { differenceInMinutes, startOfDay } from 'date-fns'
 
-import { hashString, normalizeCourseName, WEEK_DAYS } from '../../utils.jsx'
+import { normalizeCourseName } from '../../utils.jsx'
 import { layoutIntervals } from '../../interval-layout.js'
 
 export const WorkWeekGrid = ({ events, selection, setSelection, hideOtherCourses }) => {

src/main.jsx

@@ -3,7 +3,7 @@ import { render } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import { ToolOverlay } from './components/CourseVisibility.jsx'
 
-import { EventsView, MODE_WORKWEEK_GRID } from './components/EventsView.jsx'
+import { EventsView, MODE_COURSE, MODE_WORKWEEK_GRID } from './components/EventsView.jsx'
 import { HamburgerMenu } from './components/HamburgerMenu.jsx'
 import { Help } from './components/Help.jsx'
 import { Icon } from './components/Icon.jsx'
@@ -58,8 +58,6 @@ async function loadEventi(ids) {
         })
     )
 
-    // console.log(calendari)
-
     if (ids.length === 1) {
         return calendari[0]
     }
@@ -69,11 +67,11 @@ async function loadEventi(ids) {
 
 const App = ({}) => {
     // Data Sources
-    const [source, setSource] = useState('anno-1')
+    const [source, setSource] = useState('magistrale')
     const [eventi, setEventi] = useState([])
 
     // View Modes
-    const [mode, setMode] = useState(MODE_WORKWEEK_GRID)
+    const [mode, setMode] = useState(MODE_COURSE)
 
     // Selection
     const [selectedCourses, setSelectedCourses] = useState([])
@@ -84,7 +82,6 @@ const App = ({}) => {
     const [showMobileMenu, setShowMobileMenu] = useState(false)
 
     useEffect(async () => {
-        console.log('source changed')
         const eventi = await loadEventi(CALENDAR_IDS[source])
 
         window.dataBuffer[source] = eventi
@@ -97,7 +94,6 @@ const App = ({}) => {
         selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0
 
     useEffect(() => {
-        console.log('course length changed')
         const groupIds = new Set(eventi.map(e => e.nome))
 
         if (

src/styles/main.scss

@@ -876,15 +876,19 @@ body {
         flex-direction: column;
         align-items: center;
         height: 100%;
-        overflow: scroll;
+
+        overflow-y: auto;
 
         .grid {
             width: 100%;
             max-width: 55rem;
+
             display: grid;
+
             grid-template-columns: 3rem repeat(var(--time-length), 1fr);
             grid-template-rows: 2rem repeat(var(--days-length), 1fr);
-            border: 2px solid var(--border-500);
+
+            border: 1px solid var(--border-600);
             border-radius: 10px 10px 0 0;
 
             @media screen and (max-width: $device-s-width), (pointer: coarse) {
@@ -899,6 +903,7 @@ body {
                 grid-row: 1;
                 grid-column: var(--offset) / span 2;
             }
+
             .day-name {
                 display: flex;
                 align-items: center;
@@ -954,7 +959,7 @@ body {
             max-width: 55rem;
             display: grid;
             grid-template-columns: min-content 1fr;
-            border: 2px solid var(--border-500);
+            border: 1px solid var(--border-600);
             border-radius: 0 0 10px 10px;
             border-top: none;
             padding: 1rem;