Ur Time Calendar

59 |

64 |             <button onClick={handlerLoadData}>Charger</button>
65 |         </div>
66 |     )
67 | }
68 | 
69 | export default PasteMail
70 |

--------------------------------------------------------------------------------
/src/data/getP25organization.ts:
--------------------------------------------------------------------------------
 1 | /* *********************************************************************************************************************** */
 2 | /*  UTC Header                                                                                                             */
 3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
 4 | /*     getP25organization.ts                              ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
 5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
 6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
 7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
 8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
 9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
11 | /*     Update: 2025/02/15 23:33:00 by ScriptKiddie02      ::::::::::::::::::::        ########      ###      ######## .fr  */
12 | /*                                                                                                                         */
13 | /* *********************************************************************************************************************** */
14 | 
15 | import { parseSemester } from "utils"
16 | 
17 | const organisation = `
18 |     ref: p25
19 |     starts:2025/02/24
20 |     ends:2025/06/28
21 |     
22 |     2025/02/24-2024/02/28-x-x-x
23 |     2025/03/01-2024/03/01-x-x-x   # Semaine sans TD, ni TP
24 |     
25 |     2025/03/03-2025/03/08-A-x-x
26 |     2025/03/10-2025/03/15-B-x-x
27 |     2025/03/17-2025/03/22-A-x-x
28 |     2025/03/24-2025/03/29-B-x-x
29 |     2025/03/31-2025/03/31-A-x-x
30 |     2025/04/01-2025/04/05-A-x-x
31 |     
32 |     2025/04/07-2025/04/12-B-M-x # Médians
33 |     2025/04/14-2025/04/19-x-H-x # Vacances de Printemps
34 |     2025/04/21-2025/04/21-x-C-x # Lundi 21 avril férié
35 | 
36 |     2025/04/22-2025/04/26-A-x-x
37 |     2025/04/28-2025/04/28-A-x-x # Lundi 28 avril = A4
38 |     2025/04/29-2025/04/30-B-x-x
39 |     
40 |     2025/05/01-2025/05/01-x-C-x # Jeudi 1er mai férié
41 |     2025/05/02-2025/05/03-B-x-x
42 | 
43 |     2025/05/05-2025/05/05-B-x-x # Lundi 5 mai = B4
44 |     2025/05/06-2025/05/06-B-x-Jeudi # Mardi 6 mai devient un jeudi B
45 |     2025/05/07-2025/05/07-A-x-x
46 |     2025/05/08-2025/05/08-x-C-x # Jeudi 8 mai férié
47 |     2025/05/09-2025/05/10-A-x-x
48 |     
49 |     2025/05/12-2025/05/13-A-x-x
50 |     2025/05/14-2025/05/14-A-x-Jeudi # Mercredi 14 devient un jeudi A
51 |     2025/05/15-2025/05/17-B-x-x
52 |     2025/05/19-2025/05/21-B-x-x
53 |     2025/05/22-2025/05/24-A-x-x
54 |     2025/05/26-2025/05/28-A-x-x
55 | 
56 |     2025/05/29-2025/05/29-x-C-x # Jeudi 29 mai férié
57 | 
58 |     2025/05/30-2025/05/31-B-x-x
59 |     2025/06/02-2025/06/05-B-x-x
60 |     2025/06/06-2025/06/07-A-x-x
61 | 
62 |     2025/06/09-2025/06/09-x-C-x # Lundi 09 juin férié
63 | 
64 |     2025/06/10-2025/06/12-A-x-x
65 | 
66 |     2025/06/13-2025/06/13-A-x-Lundi # Vendredi 13 devient un lundi A
67 | 
68 |     2025/06/14-2025/06/14-B-x-x
69 | 
70 |     2025/06/16-2025/06/20-B-x-x
71 | 
72 |     2025/06/21-2025/06/28-x-F-x # Finaux
73 | `
74 | 
75 | const P25organization = parseSemester(organisation, 'P25')
76 | 
77 | export default P25organization
78 |

--------------------------------------------------------------------------------
/src/utils/Exam.ts:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     Exam.ts                                            ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 18:05:47 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | 
 16 | export default class Exam {
 17 |     private _UVname: string
 18 |     private _place: string
 19 |     private _seat?: string
 20 |     private _start: Date
 21 |     private _end: Date
 22 |     private _type: 'médian' | 'final'
 23 | 
 24 |     constructor(
 25 |         obj: {
 26 |             UVname: string,
 27 |             start: Date,
 28 |             end: Date,
 29 |             place: string,
 30 |             seat?: string
 31 |             type: 'médian' | 'final',
 32 |         }
 33 |     ) {
 34 |         this._UVname = obj.UVname
 35 |         this._start = obj.start
 36 |         this._end = obj.end
 37 |         this._place = obj.place
 38 |         this._seat = obj.seat
 39 |         this._type = obj.type
 40 |     }
 41 | 
 42 |     prettyPrint = (): string => {
 43 |         return `${this.UVname}`
 44 |     }
 45 | 
 46 |     get UVname() {
 47 |         return this._UVname
 48 |     }
 49 | 
 50 |     set UVname(value: string) {
 51 |         this._UVname = value
 52 |     }
 53 | 
 54 |     get type() {
 55 |         return this._type
 56 |     }
 57 | 
 58 |     set type(value: 'médian' | 'final') {
 59 |         this._type = value
 60 |     }
 61 | 
 62 |     get place() {
 63 |         return this._place
 64 |     }
 65 | 
 66 |     set place(value: string) {
 67 |         this._place = value
 68 |     }
 69 | 
 70 |     get seat() {
 71 |         return this._seat
 72 |     }
 73 | 
 74 |     set seat(value: string | undefined) {
 75 |         this._seat = value
 76 |     }
 77 | 
 78 |     get start() {
 79 |         return this._start
 80 |     }
 81 | 
 82 |     set start(value: Date) {
 83 |         this._start = value
 84 |     }
 85 | 
 86 |     get end() {
 87 |         return this._end
 88 |     }
 89 | 
 90 |     set end(value: Date) {
 91 |         this._end = value
 92 |     }
 93 | 
 94 |     printTime = (date: Date): string => {
 95 |         const hours = date.getHours().toString().padStart(2, '0')
 96 |         const minutes = date.getMinutes().toString().padStart(2, '0')
 97 |         return `${hours}:${minutes}`
 98 |     }
 99 | }
100 |

--------------------------------------------------------------------------------
/src/utils/parseClassesLine.ts:
--------------------------------------------------------------------------------
 1 | /* *********************************************************************************************************************** */
 2 | /*  UTC Header                                                                                                             */
 3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
 4 | /*     parseLine.ts                                       ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
 5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
 6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
 7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
 8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
 9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
11 | /*     Update: 2022/12/13 10:44:48 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
12 | /*                                                                                                                         */
13 | /* *********************************************************************************************************************** */
14 | 
15 | import allColors from 'data/allColors'
16 | import { classColor } from 'types/classColor'
17 | import { Class, parseClassesDay } from 'utils'
18 | 
19 | const parseClassesLine = (line: string, uvsColors: Record<string, classColor>): Class[] | undefined => {
20 |     const match = line.match(
21 |         /([A-Z0-9]{4})\s*(([A-Z]{1})\s([0-9]*)|([A-Z]{1})([0-9]*))\s([AB])?\s*([A-Z.]*)\s([0-9]{2}:[0-9]{2})-([0-9]{2}:[0-9]{2}),(F[0-9]),S=([A-Z0-9]*)(\s*\/([A-Z.]*)\s([0-9]{2}:[0-9]{2})-([0-9]{2}:[0-9]{2}),(F[0-9]),S=([A-Z0-9]*))?/
22 |     )
23 |     if (match?.length) {
24 |         const UVname = match[1]
25 |         const classType = match[3] ? match[3] : match[5]
26 |         const classReference = match[4] ? match[4] : match[6]
27 |         const week = match[7]
28 |         const day = parseClassesDay(match[8]) ?? ''
29 |         const start = match[9]
30 |         const end = match[10]
31 |         const place = match[12]
32 |         const frequence = match[11]
33 |         const color = (UVname in uvsColors ? uvsColors[UVname] : allColors[Math.floor(Math.random() * allColors.length)]) as classColor
34 |         const classes = [new Class({
35 |             UVname,
36 |             classType,
37 |             classReference: Number(classReference),
38 |             day,
39 |             start,
40 |             end,
41 |             place,
42 |             frequence,
43 |             week: week as 'A' | 'B' | undefined,
44 |             color
45 |         })]
46 |         if(match[13]) {
47 |             const day_2 = parseClassesDay(match[14]) ?? ''
48 |             const start_2 = match[15]
49 |             const end_2 = match[16]
50 |             const place_2 = match[18]
51 |             const frequence_2 = match[17]
52 |             const week_2 = match[19]
53 |             classes.push(new Class({
54 |                 UVname,
55 |                 classType,
56 |                 classReference: Number(classReference),
57 |                 day: day_2,
58 |                 start: start_2,
59 |                 end: end_2,
60 |                 place: place_2,
61 |                 frequence: frequence_2,
62 |                 week: week_2 as 'A' | 'B' | undefined,
63 |                 color
64 |             }))
65 |         }
66 |         return classes
67 |     }
68 |     return undefined
69 | }
70 | 
71 | export default parseClassesLine
72 |

--------------------------------------------------------------------------------
/src/utils/SemesterPlanning.ts:
--------------------------------------------------------------------------------
 1 | /* *********************************************************************************************************************** */
 2 | /*  UTC Header                                                                                                             */
 3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
 4 | /*     SemesterPlanning.ts                                ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
 5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
 6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
 7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
 8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
 9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
11 | /*     Update: 2022/12/11 00:46:14 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
12 | /*                                                                                                                         */
13 | /* *********************************************************************************************************************** */
14 | 
15 | import DaySemesterOrganization from './DaySemesterOrganization'
16 | 
17 | export default class SemesterPlanning {
18 |     private _semesterName: string
19 |     private _referencedDays: DaySemesterOrganization[]
20 |     private _starts: Date
21 |     private _ends: Date
22 | 
23 |     constructor(semesterName: string) {
24 |         this._semesterName = semesterName
25 |         this._referencedDays = []
26 |         this._starts = new Date()
27 |         this._ends = new Date()
28 |     }
29 | 
30 |     registerDay = (newDay: DaySemesterOrganization) => {
31 |         this._referencedDays.push(newDay)
32 |     }
33 | 
34 |     setStartDate = (newStarts: Date) => {
35 |         this._starts = new Date(newStarts)
36 |     }
37 |     setEndDate = (newEnds: Date) => {
38 |         this._ends = new Date(newEnds)
39 |     }
40 |     
41 |     getDaySemesterOrganizaton = (date: Date) => {
42 |         const filteredResult = this._referencedDays.filter((f) => {
43 |             const d = f.date
44 |             return (
45 |                 d.getDate() === date.getDate() &&
46 |                 d.getMonth() === date.getMonth() &&
47 |                 d.getFullYear() === date.getFullYear()
48 |             )
49 |         })
50 |         if (filteredResult.length === 0 || filteredResult.length > 1)
51 |             return undefined
52 |         return filteredResult[0]
53 |     }
54 | 
55 |     getWeekAlternance = (date: Date) => {
56 |         return this.getDaySemesterOrganizaton(date)?.weekAlternance
57 |     }
58 | 
59 |     isHoliday = (date: Date) => {
60 |         return this.getDaySemesterOrganizaton(date)?.isHoliday
61 |     }
62 | 
63 |     isMedian = (date: Date) => {
64 |         return this.getDaySemesterOrganizaton(date)?.isMedian
65 |     }
66 | 
67 |     isFinal = (date: Date) => {
68 |         return this.getDaySemesterOrganizaton(date)?.isFinal
69 |     }
70 | 
71 |     isExam = (date: Date) => {
72 |         return this.isFinal(date) || this.isMedian(date)
73 |     }
74 | 
75 |     isFerie = (date: Date) => {
76 |         return this.getDaySemesterOrganizaton(date)?.isFerie
77 |     }
78 | 
79 |     becomesA = (date: Date) => {
80 |         return this.getDaySemesterOrganizaton(date)?.becomesA
81 |     }
82 |     get semesterName() {
83 |         return this._semesterName
84 |     }
85 |     get starts() {
86 |         return new Date(this._starts)
87 |     }
88 |     get ends() {
89 |         return new Date(this._ends)
90 |     }
91 | 
92 |     get referencedDays() {
93 |         return this._referencedDays
94 |     }
95 | }
96 |

--------------------------------------------------------------------------------
/src/utils/parseSemester.ts:
--------------------------------------------------------------------------------
 1 | /* *********************************************************************************************************************** */
 2 | /*  UTC Header                                                                                                             */
 3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
 4 | /*     parseSemester.ts                                   ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
 5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
 6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
 7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
 8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
 9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
11 | /*     Update: 2022/12/11 00:34:08 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
12 | /*                                                                                                                         */
13 | /* *********************************************************************************************************************** */
14 | 
15 | import { DaySemesterOrganization, SemesterPlanning } from "utils"
16 | 
17 | const parseSemester = (organisation: string, semesterName: string) => {
18 |     const semester = new SemesterPlanning(semesterName)
19 |     const lines = organisation.split('\n')
20 |     lines.forEach((line) => {
21 |         const match = line.match(
22 |             /([0-9]{4})\/([0-9]{2})\/([0-9]{2})-([0-9]{4})\/([0-9]{2})\/([0-9]{2})-([A|B|x])-([E|C|H|F|M|x])-(Lundi|Mardi|Mercredi|Jeudi|Vendredi|Samedi|x)/
23 |         )
24 |         if (match?.length) {
25 |             const [_, startYear, startMonth, startDay, endYear, endMonth, endDay, weekAlternance, type, becomesA] = match
26 |             for (let i = parseInt(startYear); i <= parseInt(endYear); i++) {
27 |                 for (let j = parseInt(startMonth); j <= parseInt(endMonth); j++) {
28 |                     for (let k = parseInt(startDay); k <= parseInt(endDay); k++) {
29 |                         const date = new Date(i, j - 1, k)
30 |                         const options: Record<string, any> = { 'weekAlternance': weekAlternance }
31 |                         switch (type) {
32 |                             case 'F':
33 |                                 options['isFinal'] = true;
34 |                                 break;
35 |                             case 'M':
36 |                                 options['isMedian'] = true;
37 |                                 break;
38 |                             case 'C':
39 |                                 options['isFerie'] = true;
40 |                                 break;
41 |                             case 'H':
42 |                                 options['isHoliday'] = true;
43 |                                 break;
44 |                             default:
45 |                                 break;
46 |                         }
47 |                         if (becomesA !== 'x')
48 |                             options['becomesA'] = becomesA
49 |                         const organisationDay = new DaySemesterOrganization(date, options)
50 |                         semester.registerDay(organisationDay)                 
51 |                     }
52 |                 }
53 |             }
54 |         } else {
55 |             const match = line.match(
56 |                 /(starts|ends):([0-9]{4})\/([0-9]{2})\/([0-9]{2})/
57 |             )
58 |             if (match?.length) {
59 |                 const [_, type, year, month, day] = match
60 |                 const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
61 |                 if (type === 'starts')
62 |                     semester.setStartDate(date)
63 |                 else
64 |                     semester.setEndDate(date)
65 |             }
66 |         }
67 |     })
68 | 
69 |     return semester
70 | }
71 | 
72 | export default parseSemester
73 |

--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     App.tsx                                            ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2023/09/03 17:28:45 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import React, { useEffect, useState } from 'react'
 16 | import './App.css'
 17 | import { Calendar, Notif, Settings } from 'components'
 18 | import {
 19 |     Class,
 20 |     loadFromLocalStorage,
 21 |     parseCache,
 22 |     saveToCache,
 23 |     SemesterPlanning,
 24 |     Exam,
 25 |     parseClassesMail,
 26 | } from 'utils'
 27 | import { notifType } from 'types/notifType'
 28 | import getA25organisation from 'data/getA25organization'
 29 | 
 30 | function App() {
 31 |     const [classes, setClasses] = useState<Class[]>([])
 32 |     const [exams, setExams] = useState<Exam[]>([])
 33 |     const [semesterOrganization, setSemesterOrganization] =
 34 |         useState<SemesterPlanning>(getA25organisation)
 35 |     const [notif, setNotif] = useState<[string, notifType] | undefined>(
 36 |         undefined
 37 |     )
 38 | 
 39 |     const setOpen = (open: boolean) => {
 40 |         if (!open) setNotif(undefined)
 41 |     }
 42 | 
 43 |     const handlerSetNotifs = (notif: [string, notifType]) => {
 44 |         setNotif(notif)
 45 |         setTimeout(() => {
 46 |             setNotif(undefined)
 47 |         }, 4000)
 48 |     }
 49 | 
 50 |     useEffect(() => {
 51 |         const Classes = loadFromLocalStorage('classes')
 52 |         if (Classes) {
 53 |             const result = parseCache(Classes, 'Classes')
 54 |             setClasses(result)
 55 |         }
 56 |         const Exams = loadFromLocalStorage('exams')
 57 |         if (Exams) {
 58 |             const result = parseCache(Exams, 'Exams')
 59 |             setExams(result)
 60 |         }
 61 |     }, [])
 62 | 
 63 |     const handlerSetClasses = (classes: Class[]) => {
 64 |         const to_string = JSON.stringify(classes)
 65 |         setClasses(parseCache(to_string, 'Classes')) // only way found to force update when changing class name
 66 |         const r = saveToCache(JSON.stringify(classes), 'classes')
 67 |         if (r) handlerSetNotifs(['Classes sauvegardées', 'success'])
 68 |         else
 69 |             handlerSetNotifs([
 70 |                 'Accepte la mise en cache pour sauvegarder',
 71 |                 'warning',
 72 |             ])
 73 |     }
 74 | 
 75 |     const handlerSetExams = (exams: Exam[]) => {
 76 |         const to_string = JSON.stringify(exams)
 77 |         setExams(parseCache(to_string, 'Exams')) // only way found to force update when changing class name
 78 |         const r = saveToCache(JSON.stringify(exams), 'exams')
 79 |         if (r) handlerSetNotifs(['Examens sauvegardées', 'success'])
 80 |         else
 81 |             handlerSetNotifs([
 82 |                 'Accepte la mise en cache pour sauvegarder',
 83 |                 'warning',
 84 |             ])
 85 |     }
 86 | 
 87 |     return (
 88 |         <div className="App">
 89 |             <div className="calendar-container">
 90 |                 <Calendar
 91 |                     classes={classes}
 92 |                     exams={exams}
 93 |                     semesterPlanning={semesterOrganization}
 94 |                 />
 95 |             </div>
 96 |             <Settings
 97 |                 defaultOpenValue={
 98 |                     loadFromLocalStorage('classes') ? false : true
 99 |                 }
100 |                 setClasses={handlerSetClasses}
101 |                 classes={classes}
102 |                 setExams={handlerSetExams}
103 |                 exams={exams}
104 |                 semesterPlanning={semesterOrganization}
105 |             />
106 |             <Notif
107 |                 isOpen={notif ? true : false}
108 |                 notif={notif}
109 |                 setOpen={setOpen}
110 |             />
111 |         </div>
112 |     )
113 | }
114 | 
115 | export default App
116 |

--------------------------------------------------------------------------------
/src/components/Settings/Settings.scss:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     Settings.scss                                      ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/12 22:40:57 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | .settings-button {
 16 |     display: flex;
 17 |     position: absolute;
 18 |     bottom: 20px;
 19 |     right: 20px;
 20 |     background-color: rgb(255, 255, 255, 0.8);
 21 |     border-radius: 100%;
 22 |     width: 40px;
 23 |     height: 40px;
 24 |     align-items: center;
 25 |     align-content: center;
 26 |     justify-content: center;
 27 |     font-size: 20px;
 28 |     z-index: 100;
 29 |     transition: linear 100ms;
 30 | }
 31 | 
 32 | .settings-button:hover {
 33 |     transform: rotate(90deg);
 34 |     cursor: pointer;
 35 | }
 36 | 
 37 | .settings-modal-fragment {
 38 |     display: flex;
 39 |     position: absolute;
 40 |     align-items: center;
 41 |     align-content: center;
 42 |     justify-content: center;
 43 |     top: 0;
 44 |     bottom: 0;
 45 |     left: 0;
 46 |     right: 0;
 47 |     z-index: 100;
 48 | }
 49 | 
 50 | .settings-modal-background {
 51 |     width: 100vw;
 52 |     height: 100vh;
 53 |     background-color: rgb(0, 0, 0, 0.5);
 54 |     filter: blur(100px);
 55 |     position: absolute;
 56 | }
 57 | 
 58 | .settings-modal-content {
 59 |     background-color: rgb(240, 240, 240, 0.98);
 60 |     width: 70vw;
 61 |     height: 70vh;
 62 |     border-radius: 10px;
 63 |     filter: blur(0px);
 64 |     padding: 10px;
 65 |     position: relative;
 66 |     align-content: stretch;
 67 |     align-items: stretch;
 68 |     overflow-y: scroll;
 69 | }
 70 | 
 71 | .settings-section {
 72 |     border: 1px solid rgb(255, 255, 255);
 73 |     padding: 10px;
 74 |     margin: 10px;
 75 |     border-radius: 5px;
 76 | }
 77 | 
 78 | .settings-title, .settings-subtitle {
 79 |     font-size: 20px;
 80 |     font-weight: bold;
 81 |     color: rgb(107, 44, 254);
 82 |     text-align: center;
 83 | }
 84 | .settings-subtitle {
 85 |     font-size: 16px;
 86 | }
 87 | 
 88 | 
 89 | .settings-exit {
 90 |     color:rgb(184, 9, 9);
 91 |     border: 1px solid rgb(184, 9, 9);
 92 |     border-radius: 2px;
 93 |     padding: 5px;
 94 | }
 95 | 
 96 | .settings-modal-fragment .settings-section button {
 97 |     background-color: rgb(107, 44, 254);
 98 |     color: white;
 99 |     border: 0px solid #00000000;
100 |     border-radius: 5px;
101 |     padding: 10px;
102 | 
103 |     &:hover{
104 |         background-color: rgb(107, 44, 254, 0.8);
105 |         cursor: pointer;
106 |     }
107 | }
108 | 
109 | .settings-tabs {
110 |     position: relative;
111 |     display: flex;
112 |     flex-direction: row;
113 |     justify-content: flex-start;
114 |     gap: 20px;
115 |     align-items: center;
116 |     align-content: flex-start;
117 |     border-radius: 10px;
118 | 
119 |     & > div {
120 |         padding: 10px;
121 |         cursor: pointer;
122 |         position: relative;
123 | 
124 |         .settings-tab-count {
125 |             position: absolute;
126 |             top: 0;
127 |             right: -10px;
128 |             background-color: rgb(107, 44, 254);
129 |             color: white;
130 |             border-radius: 50%;
131 |             width: 20px;
132 |             height: 20px;
133 |             font-size: 12px;
134 |             display: flex;
135 |             align-items: center;
136 |             align-content: center;
137 |             justify-content: center;
138 |         }
139 |     }
140 | }
141 | 
142 | .settings-tab-active {
143 |     background-color: rgb(255, 255, 255);
144 |     border-radius: 10px;
145 |     cursor: pointer;
146 | }
147 | 
148 | .settings-grouped-buttons {
149 |     display: flex;
150 |     flex-direction: row;
151 |     justify-content: center;
152 |     gap: 10px;
153 | }
154 | 
155 | @media (max-width: 480px) {
156 |     .settings-modal-content {
157 |         width: 90vw;
158 |         height: 90vh;
159 |     }
160 | 
161 |     .settings-tabs {
162 |         justify-content: space-between;
163 |         gap: 0;
164 |     }
165 | }
166 |

--------------------------------------------------------------------------------
/src/utils/Class.ts:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     Class.ts                                           ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/12 22:54:04 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import { classColor } from "types/classColor"
 16 | import { weekAlternance } from "types/weekAlternance"
 17 | 
 18 | export default class Class {
 19 |     private _UVname: string
 20 |     private _day: string
 21 |     private _place: string
 22 |     private _start: string
 23 |     private _end: string
 24 |     private _frequence: string
 25 |     private _classType: string
 26 |     private _classReference: number
 27 |     private _week: weekAlternance
 28 |     private _color: classColor
 29 | 
 30 |     constructor(
 31 |         obj: {
 32 |             UVname: string,
 33 |             classType: string,
 34 |             classReference: number,
 35 |             day: string,
 36 |             start: string,
 37 |             end: string,
 38 |             place: string,
 39 |             frequence: string,
 40 |             week: weekAlternance,
 41 |             color: classColor,
 42 |         }
 43 |     ) {
 44 |         this._UVname = obj.UVname
 45 |         this._day = obj.day
 46 |         this._start = obj.start
 47 |         this._end = obj.end
 48 |         this._place = obj.place
 49 |         this._frequence = obj.frequence
 50 |         this._classType = obj.classType
 51 |         this._classReference = obj.classReference
 52 |         this._week = obj.week
 53 |         this._color = obj.color
 54 |     }
 55 | 
 56 |     prettyPrint = (): string => {
 57 |         return `${this.UVname} - ${this.day.toLowerCase()} de ${this.start} à ${this.end}`
 58 |     }
 59 | 
 60 |     private splitTime = (time: string, property: 'min' | 'hour') => {
 61 |         return Number(time.split(':')[property === 'min' ? 1 : 0])
 62 |     }
 63 | 
 64 |     get UVname() {
 65 |         return this._UVname
 66 |     }
 67 | 
 68 |     set UVname(value: string) {
 69 |         this._UVname = value
 70 |     }
 71 | 
 72 |     get day() {
 73 |         return this._day
 74 |     }
 75 | 
 76 |     set day(value: string) {
 77 |         this._day = value
 78 |     }
 79 | 
 80 |     get place() {
 81 |         return this._place
 82 |     }
 83 | 
 84 |     set place(value: string) {
 85 |         this._place = value
 86 |     }
 87 | 
 88 |     get start() {
 89 |         return this._start
 90 |     }
 91 | 
 92 |     set start(value: string) {
 93 |         this._start = value
 94 |     }
 95 | 
 96 |     get startHour() {
 97 |         return this.splitTime(this._start, 'hour')
 98 |     }
 99 |     get startMin() {
100 |         return this.splitTime(this._start, 'min')
101 |     }
102 |     get end() {
103 |         return this._end
104 |     }
105 | 
106 |     set end(value: string) {
107 |         this._end = value
108 |     }
109 | 
110 |     get endHour() {
111 |         return this.splitTime(this._end, 'hour')
112 |     }
113 |     get endMin() {
114 |         return this.splitTime(this._end, 'min')
115 |     }
116 |     get frequence() {
117 |         return this._frequence
118 |     }
119 | 
120 |     set frequence(value: string) {
121 |         this._frequence = value
122 |     }
123 | 
124 |     get classType() {
125 |         return this._classType
126 |     }
127 | 
128 |     set classType(value: string) {
129 |         this._classType = value
130 |     }
131 | 
132 |     get prettyClassType() {
133 |         switch (this._classType) {
134 |             case 'C':
135 |                 return 'Cours'
136 |             case 'D':
137 |                 return 'TD'
138 |             case 'T':
139 |                 return 'TP'
140 |         }
141 |         return undefined
142 |     }
143 |     get classReference() {
144 |         return this._classReference
145 |     }
146 | 
147 |     set classReference(value: number) {
148 |         this._classReference = value
149 |     }
150 | 
151 |     get week() {
152 |         return this._week
153 |     }
154 | 
155 |     set week(value: weekAlternance) {
156 |         this._week = value
157 |     }
158 |     
159 |     get color() {
160 |         return this._color
161 |     }
162 | 
163 |     set color(value: classColor) {
164 |         this._color = value
165 |     }
166 | 
167 |     setColor(color: classColor) {
168 |         this._color = color
169 |     }
170 | }
171 |

--------------------------------------------------------------------------------
/src/components/SettingsClasses/SettingsClasses.tsx:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     SettingsClasses.tsx                                ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 18:16:12 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import './SettingsClasses.scss'
 16 | 
 17 | import { PasteMail, SettingsClass } from 'components'
 18 | import { useState } from 'react'
 19 | import { Class, saveFile, SemesterPlanning, classesToICS } from 'utils'
 20 | 
 21 | export interface SettingsClassesProps {
 22 |     classes: Class[]
 23 |     setClasses: (classes: Class[]) => void
 24 |     semesterPlanning: SemesterPlanning
 25 | }
 26 | 
 27 | const SettingsClasses = (props: SettingsClassesProps) => {
 28 |     const { classes, setClasses, semesterPlanning } = props
 29 | 
 30 |     const [loadFromMail, setLoadFromMail] = useState<boolean>(classes.length === 0)
 31 | 
 32 |     const handlerLoadFromMail = (loaded_classes: Class[]) => {
 33 |         if (loaded_classes.length === 0) {
 34 |             alert("L'emploi du temps n'a pas pu être chargé. Vérifiez que vous avez bien copié le mail complet.")
 35 |             return
 36 |         }
 37 |         if (classes.length !== 0) {
 38 |             const confirmed = window.confirm(
 39 |                 "Etes-vous sûr.e de vouloir écraser l'ancien emploi du temps chargé?"
 40 |             )
 41 |             if (!confirmed) 
 42 |                 return
 43 |         }
 44 |         setClasses(loaded_classes)
 45 |         setLoadFromMail(false)
 46 |     }
 47 | 
 48 |     const handlerDeleteClasses = () => {
 49 |         const confirmed = window.confirm(
 50 |             "Etes-vous sûr.e de vouloir supprimer toutes les classes de l'emploi du temps?"
 51 |         )
 52 |         if (!confirmed) 
 53 |             return
 54 |         setClasses([])
 55 |         setLoadFromMail(true)
 56 |     }
 57 | 
 58 |     const setClass = (classSlot?: Class, newClass?: Class) => {
 59 |         const filtered = classes.filter(c => c !== classSlot)
 60 |         if (newClass === undefined) {
 61 |             setClasses(filtered)
 62 |             return
 63 |         }
 64 |         setClasses([...filtered, newClass])
 65 |     }
 66 | 
 67 |     if(loadFromMail) {
 68 |         return <div className='settings-section'>
 69 |             <h2 className='settings-subtitle'>Importer depuis un mail</h2>
 70 |             <PasteMail setClasses={handlerLoadFromMail} />
 71 |             <button style={{marginTop: '10px'}} onClick={() => setClass(undefined, new Class({
 72 |             UVname: "YZ89",
 73 |             classType: "C",
 74 |             classReference: 1,
 75 |             day: "LUNDI",
 76 |             start: "08:00",
 77 |             end: "10:00",
 78 |             place: "BF100",
 79 |             frequence: '1',
 80 |             week: undefined,
 81 |             color: 'lagon',
 82 |         }))}>Ajouter une classe</button>
 83 |         </div>
 84 |     }
 85 |     return <>
 86 |         <div className='settings-section settings-grouped-buttons'>
 87 |             <button onClick={() => handlerDeleteClasses()}>Supprimer</button>
 88 |             <button 
 89 |                 onClick={() => saveFile('calendrier.ics', classesToICS(semesterPlanning, classes))}>
 90 |                     Exporter au format .ics
 91 |             </button>
 92 |         </div>
 93 |         <div className='settings-section'>
 94 |             <h2 className='settings-subtitle'>Mes classes</h2>
 95 |             <div className='settings-all-classes'>
 96 |                 {classes.sort((a,b) => {return a.UVname < b.UVname ? -1 : 1}).map((c, key) => (
 97 |                     <SettingsClass 
 98 |                     key={key}
 99 |                     class_={c}
100 |                     setClass={(newClass) => setClass(c, newClass)}
101 |                     />
102 |                 ))}
103 |             </div>
104 |             <button onClick={() => setClass(undefined, new Class({
105 |             UVname: "YZ89",
106 |             classType: "C",
107 |             classReference: 1,
108 |             day: "LUNDI",
109 |             start: "08:00",
110 |             end: "10:00",
111 |             place: "BF100",
112 |             frequence: '1',
113 |             week: undefined,
114 |             color: 'lagon',
115 |         }))}>Ajouter une classe</button>
116 |         </div>
117 |         </>
118 | }
119 | 
120 | export default SettingsClasses
121 |

--------------------------------------------------------------------------------
/src/utils/toICS.ts:
--------------------------------------------------------------------------------
 1 | /* *********************************************************************************************************************** */
 2 | /*  UTC Header                                                                                                             */
 3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
 4 | /*     toICS.ts                                           ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
 5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
 6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
 7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
 8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
 9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
11 | /*     Update: 2022/12/13 18:05:47 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
12 | /*                                                                                                                         */
13 | /* *********************************************************************************************************************** */
14 | 
15 | import { Class, getDayLabel, SemesterPlanning, Exam } from "utils"
16 | import { v4 as uuidv4 } from 'uuid'
17 | 
18 | const toICSDateTime = (date: Date, hour: number, min: number) => {
19 |     return `${toICSDate(date)}T${hour < 10 ? `0${hour}` : hour}${min < 10 ? `0${min}` : min}00`
20 | }
21 | 
22 | const toICSDate = (date: Date) => {
23 |     return date.getFullYear().toString() +
24 |     ((date.getMonth() + 1)<10? "0" + (date.getMonth() + 1).toString():(date.getMonth() + 1).toString()) + 
25 |     (date.getDate()<10? "0" + date.getDate().toString():date.getDate().toString());
26 | }
27 | 
28 | const writeDayEvent = (date: Date, name: string, tags='') => {
29 |     const tomorrow = new Date(date)
30 |     tomorrow.setDate(tomorrow.getDate() + 1)
31 |     return `BEGIN:VEVENT\nUID:${uuidv4()}@urtimecalendar.com\nDTSTAMP:19970901T130000Z\nDTSTART;VALUE=DATE:${toICSDate(date)}\nDTEND;VALUE=DATE:${toICSDate(tomorrow)}\nSUMMARY:${name}\nCATEGORIES:UTC${tags?','+tags:''}\nEND:VEVENT\n`
32 | }
33 | 
34 | const writeClassEvent = (classSlot: Class, date: Date) => {
35 |     return `BEGIN:VEVENT\nSUMMARY:${classSlot.UVname} - ${classSlot.prettyClassType} ${classSlot.classReference}\nUID:${uuidv4()}@urtimecalendar.com\nTRANSP:TRANSPARENT\nDTSTART:${toICSDateTime(date, classSlot.startHour, classSlot.startMin)}\nDTEND:${toICSDateTime(date, classSlot.endHour, classSlot.endMin)}\nDTSTAMP:19970901T130000Z\nLOCATION:${classSlot.place}\nCATEGORIES:UTC,${classSlot.UVname},${classSlot.prettyClassType}${classSlot.classReference}\nEND:VEVENT\n`
36 | }
37 | 
38 | const writeExamEvent = (exam: Exam, date: Date) => {
39 |     return `BEGIN:VEVENT\nSUMMARY:${exam.UVname} - ${exam.type}\nUID:${uuidv4()}@urtimecalendar.com\nTRANSP:TRANSPARENT\nDTSTART:${toICSDateTime(date, exam.start.getHours(), exam.start.getMinutes())}\nDTEND:${toICSDateTime(date, exam.end.getHours(), exam.end.getMinutes())}\nDTSTAMP:19970901T130000Z\nLOCATION:${exam.place} ${exam.seat??''}\nCATEGORIES:UTC,${exam.UVname},${exam.type}\nEND:VEVENT\n`
40 | }
41 | 
42 | const classesToICS = (semesterPlanning: SemesterPlanning, classes: Class[]) => {
43 |     let icsContent = `BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//urtimecalendar.com//NONSGML UrTimeCalendar//EN\n`
44 |    
45 |     for (const day = semesterPlanning.starts; day <= semesterPlanning.ends; day.setDate(day.getDate() + 1)) 
46 |     {
47 |         const replaceDay = semesterPlanning.becomesA(day)
48 |         const examDay = semesterPlanning.isExam(day)
49 |         const isFerie = semesterPlanning.isFerie(day)
50 |         const isHoliday = semesterPlanning.isHoliday(day)
51 |         if (replaceDay) {
52 |             icsContent += writeDayEvent(day, `Devient un ${replaceDay.toLowerCase()}`, 'Remplacement')
53 |         }
54 |         if (examDay) {
55 |             icsContent += writeDayEvent(day, `Jour d'examen`, 'Examen')
56 |         }
57 |         if (isFerie) {
58 |             icsContent += writeDayEvent(day, `Ferié`)
59 |         }
60 |         if (isHoliday) {
61 |             icsContent += writeDayEvent(day, `Vacances universitaires`, 'Vacances')
62 |         }
63 | 
64 |         if (!isFerie && !isHoliday && !examDay) {
65 |             const filtered = classes.filter(
66 |                 (c) =>
67 |                     ((!semesterPlanning.becomesA(day) &&
68 |                         c.day === getDayLabel(day).toUpperCase()) ||
69 |                         semesterPlanning.becomesA(day)?.toUpperCase() ===
70 |                             c.day) &&
71 |                     (c.week === undefined ||
72 |                         c.week === semesterPlanning.getWeekAlternance(day))
73 |             )
74 | 
75 |             // eslint-disable-next-line no-loop-func
76 |             filtered.forEach((c) => {
77 |                 icsContent += writeClassEvent(c, day)
78 |             })
79 |         }
80 |     
81 |     }
82 | 
83 |     icsContent += 'END:VCALENDAR'
84 |     return icsContent
85 | }
86 | 
87 | const examsToICS = (exams: Exam[]) => {
88 |     let icsContent = `BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//urtimecalendar.com//NONSGML UrTimeCalendar//EN\n`
89 |    
90 |     exams.forEach((exam) => {
91 |         icsContent += writeExamEvent(exam, exam.start)
92 |     })
93 | 
94 |     icsContent += 'END:VCALENDAR'
95 |     return icsContent
96 | }
97 | 
98 | export { classesToICS, examsToICS }

--------------------------------------------------------------------------------
/src/components/SettingsExams/SettingsExams.tsx:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     SettingsExams.tsx                                  ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 18:05:47 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import { SettingsExam } from 'components'
 16 | import { createRef } from 'react'
 17 | import { Exam, parseExamsMail, printDate, SemesterPlanning, examsToICS, saveFile } from 'utils'
 18 | import './SettingsExams.scss'
 19 | 
 20 | export interface SettingsExamsProps {
 21 |     setExams: (exams: Exam[]) => void
 22 |     exams: Exam[]
 23 |     semesterPlanning: SemesterPlanning
 24 | }
 25 | 
 26 | const SettingsExams = (props: SettingsExamsProps) => {
 27 |     const { setExams, exams, semesterPlanning } = props
 28 | 
 29 |     const ref = createRef<HTMLTextAreaElement>()
 30 | 
 31 |     const handlerLoadData = () => {
 32 |         if (!ref.current) return
 33 |         const data = parseExamsMail(ref.current.value)
 34 |         setExams([...exams.filter((exam) => exam.type === "médian"), ...data])
 35 |     }
 36 | 
 37 |     const setExam = (examSlot?: Exam, newExam?: Exam) => {
 38 |         const filtered = exams.filter(c => c !== examSlot)
 39 |         if (newExam === undefined) {
 40 |             setExams(filtered)
 41 |             return
 42 |         }
 43 |         setExams([...filtered, newExam])
 44 |     }
 45 | 
 46 |     const addExam = (type: "médian" | "final") => {
 47 |         const start = new Date()
 48 |         start.setHours(8)
 49 |         start.setMinutes(0)
 50 |         const end = new Date()
 51 |         end.setHours(10)
 52 |         end.setMinutes(0)
 53 | 
 54 |         setExam(undefined, new Exam({
 55 |             UVname: "YZ89",
 56 |             type: type,
 57 |             start: start,
 58 |             end: end,
 59 |             place: "HDS",
 60 |             seat: type==='final' ? 'place 1' : undefined
 61 |         }))
 62 |     }
 63 | 
 64 | 
 65 |     const placeHolder = `MT12	11/01/2021	de 08:00	à 09:30	SI S ASP	place 131
 66 |     LO21	15/01/2021	de 08:00	à 09:30	SI S ASP	place 151
 67 |     IA01	12/01/2021	de 08:00	à 09:30	SI S ASP	place 203
 68 |     `
 69 |     const finalExams = exams.filter((exam) => exam.type === "final")
 70 |     const medianExams = exams.filter((exam) => exam.type === "médian")
 71 | 
 72 |     const medians = semesterPlanning.referencedDays.filter(day => day.isMedian).sort((a, b) => { return (a.date.getTime() - b.date.getTime() < 0) ? -1 : 1})
 73 |     const finaux = semesterPlanning.referencedDays.filter(day => day.isFinal).sort((a, b) => { return (a.date.getTime() - b.date.getTime() < 0) ? -1 : 1})
 74 | 
 75 |     const startMedian = medians[0].date
 76 |     const endMedian = medians[medians.length - 1].date
 77 |     const startFinal = finaux[0].date
 78 |     const endFinal = finaux[finaux.length - 1].date
 79 | 
 80 |     return (<>
 81 |         <div className="settings-section">
 82 |             <h2 className="settings-subtitle">Médians - du {printDate(startMedian)} au {printDate(endMedian)}</h2>
 83 |             {medianExams.length!==0 && <button onClick={() => saveFile('medians.ics', examsToICS(medianExams))}>Exporter au format .ics</button>}
 84 |             <div className='settings-all-exams'>
 85 |                 {medianExams.map(
 86 |                     (exam, index) => (
 87 |                         <SettingsExam exam={exam} setExam={(newExam) => setExam(exam, newExam)} key={index} />
 88 |                     )
 89 |                 )}
 90 |             </div>
 91 |             <button onClick={() => addExam('médian')}>Ajouter un médian</button>
 92 |         </div>
 93 |         <div className="settings-section">
 94 |             <h2 className="settings-subtitle">Finaux - du {printDate(startFinal)} au {printDate(endFinal)}</h2>
 95 |             {finalExams.length === 0 ? <><textarea
 96 |                 className="pastemail_exams-textarea"
 97 |                 ref={ref}
 98 |                 placeholder={placeHolder}
 99 |             />
100 |             <button onClick={handlerLoadData}>Charger</button> <button onClick={() => addExam('final')}>Ajouter un final</button></>
101 |             :
102 |             <>
103 |                 <button onClick={() => saveFile('finaux.ics', examsToICS(finalExams))}>Exporter au format .ics</button>
104 |                 <div className='settings-all-exams'>
105 |                 {finalExams.map(
106 |                         (exam, index) => (
107 |                             <SettingsExam exam={exam} setExam={(newExam) => setExam(exam, newExam)} key={index} />
108 |                         )
109 |                     )}
110 |                 </div>
111 |                 <button onClick={() => addExam('final')}>Ajouter un final</button></>}
112 |         </div>
113 |         </>
114 |     )
115 | }
116 | 
117 | export default SettingsExams
118 |

--------------------------------------------------------------------------------
/src/components/Calendar/Calendar.scss:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     Calendar.scss                                      ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 18:18:44 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | $max-rows: (21 - 7) * 4;
 16 | 
 17 | .calendar-fragment {
 18 |     border-radius: 10px;
 19 |     margin: 50px;
 20 |     padding: 20px;
 21 |     background: inherit;
 22 |     z-index: 10;
 23 |     position: absolute;
 24 |     overflow: hidden;
 25 |     top: 0;
 26 |     bottom: 0;
 27 |     left: 0;
 28 |     right: 0;
 29 |     display: flex;
 30 |     flex-direction: column;
 31 |     row-gap: 10px;
 32 |     justify-content: stretch;
 33 |     align-items: stretch;
 34 |     align-content: stretch;
 35 | }
 36 | 
 37 | .calendar-content-fragment {
 38 |     position: relative;
 39 |     flex: 1 1 auto;
 40 |     display: flex;
 41 |     justify-content: stretch;
 42 |     align-items: stretch;
 43 |     align-content: stretch;
 44 | }
 45 | .calendar-content {
 46 |     display: grid;
 47 |     &.complete {
 48 |         grid-template-columns: max-content repeat(14, 1fr);
 49 |     }
 50 |     &.typical {
 51 |         grid-template-columns: max-content repeat(10, 1fr);
 52 |     }
 53 |     &.compact {
 54 |         grid-template-columns: max-content repeat(10, 1fr);
 55 |     }
 56 |     &.day {
 57 |         grid-template-columns: max-content repeat(2, 1fr);
 58 |     }
 59 |     grid-auto-rows: 1fr;
 60 |     column-gap: 10px;
 61 |     position: absolute;
 62 |     top: 0;
 63 |     bottom: 0;
 64 |     left: 0;
 65 |     right: 0;
 66 | }
 67 | .calendar-fragment:before {
 68 |     content: '';
 69 |     position: absolute;
 70 |     top: 0;
 71 |     left: 0;
 72 |     right: 0;
 73 |     bottom: 0;
 74 |     box-shadow: inset 0 0 2000px rgb(255, 255, 255);
 75 |     background: inherit;
 76 |     z-index: 0;
 77 | }
 78 | .calendar-legend-day {
 79 |     border-bottom: 4px solid rgba(255, 255, 255, 0.5);
 80 | 
 81 |     &.week-a {
 82 |         border-bottom: 4px solid rgb(231, 46, 5);
 83 |     }
 84 |     &.week-b {
 85 |         border-bottom: 4px solid rgb(0, 11, 218);
 86 |     }
 87 | 
 88 |     &.today {
 89 |         color: rgb(107, 44, 254);
 90 |         font-weight: 700;
 91 |     }
 92 | }
 93 | 
 94 | $max-columns: 16;
 95 | 
 96 | @for $i from 1 through $max-columns {
 97 |     .col-start-#{$i} {
 98 |         grid-column-start: $i;
 99 |     }
100 |     .col-end-#{$i} {
101 |         grid-column-end: $i;
102 |     }
103 | }
104 | 
105 | @for $i from 1 through $max-rows {
106 |     .row-start-#{$i} {
107 |         grid-row-start: $i;
108 |     }
109 |     .row-end-#{$i} {
110 |         grid-row-end: $i;
111 |     }
112 | }
113 | 
114 | .calendar-header {
115 |     display: flex;
116 |     flex-direction: row;
117 |     gap: 10px;
118 |     justify-content: space-between;
119 |     color: rgb(83, 83, 83);
120 | 
121 |     & > div {
122 |         display: flex;
123 |         gap: 5px;
124 |         flex-direction: row;
125 |         justify-content: space-between;
126 |     }
127 | }
128 | 
129 | .calendar-current-date div {
130 |     background-color: rgb(255, 255, 255);
131 |     padding: 5px;
132 |     border-radius: 5px;
133 |     z-index: 11;
134 |     display: flex;
135 |     align-items: center;
136 |     align-content: center;
137 |     justify-content: center;
138 | }
139 | 
140 | .calendar-current-date-label {
141 |     margin-left: 10px;
142 |     background-color: transparent !important;
143 | }
144 | 
145 | .calendar-mode-selector {
146 |     background-color: rgb(255, 255, 255);
147 |     padding: 5px;
148 |     border-radius: 5px;
149 |     z-index: 11;
150 |     color: rgb(83, 83, 83);
151 |     border: 0px solid rgba(255, 255, 255, 0.5);
152 | }
153 | 
154 | .calendar-current-date div:hover {
155 |     cursor: pointer;
156 | }
157 | .slot {
158 |     font-size: xx-small;
159 |     grid-column: 1 / -1;
160 |     text-align: left;
161 |     &.solid {
162 |         border-top: 1px solid rgba(227, 227, 227, 0.5);
163 |     }
164 | 
165 |     &.dashed {
166 |         border-top: 1px dashed rgba(227, 227, 227, 0.3);
167 |     }
168 |     &.important {
169 |         border-color: rgba(0, 0, 0, 0.2);
170 |     }
171 | }
172 | 
173 | .slot-time {
174 |     font-size: 10px;
175 | }
176 | 
177 | .calendar-mode-selector:hover {
178 |     cursor: pointer;
179 | }
180 | .calendar-background-fragment {
181 |     position: absolute;
182 |     background-color: rgba(0, 0, 0, 0);
183 |     top: 0;
184 |     bottom: 0;
185 |     left: 0;
186 |     right: 0;
187 |     z-index: 10;
188 | }
189 | 
190 | .calendar-special-day {
191 |     position: relative;
192 |     z-index: 15;
193 |     display: flex;
194 |     flex-direction: column;
195 |     overflow: hidden;
196 |     box-sizing: border-box;
197 |     vertical-align: middle;
198 |     align-items: center;
199 |     justify-content: center;
200 | 
201 |     &.Férié {
202 |         color: white;
203 |         background: repeating-linear-gradient(
204 |             45deg,
205 |             #606dbc,
206 |             #606dbc 10px,
207 |             #465298 10px,
208 |             #465298 20px
209 |         );
210 |     }
211 |     &.Vacances {
212 |         color: white;
213 |         background: repeating-linear-gradient(
214 |             45deg,
215 |             #222,
216 |             #222 10px,
217 |             #333 10px,
218 |             #333 20px
219 |         );
220 |     }
221 | 
222 |     &.Finaux,
223 |     &.Médians {
224 |         background-color: rgba(217, 0, 87, 0.424);
225 |     }
226 | }
227 | 
228 | @media (max-width: 480px) {
229 |     .calendar-fragment {
230 |         padding: 5px;
231 |         margin: 5px;
232 |         font-size: xx-small;
233 |         border-radius: 10px;
234 |     }
235 | }
236 |

--------------------------------------------------------------------------------
/src/components/Settings/Settings.tsx:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     Settings.tsx                                       ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 14:47:02 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import './Settings.scss'
 16 | 
 17 | import { FiSettings } from 'react-icons/fi'
 18 | import { useState } from 'react'
 19 | import { Class, Exam, isKifyAccepted, SemesterPlanning } from 'utils'
 20 | import { isMobile } from 'react-device-detect'
 21 | import { SettingsClasses, SettingsExams, SettingsSemester } from 'components'
 22 | 
 23 | 
 24 | export interface SettingsProps {
 25 |     setClasses: (classes: Class[]) => void
 26 |     setExams: (exams: Exam[]) => void
 27 |     defaultOpenValue?: boolean
 28 |     classes: Class[]
 29 |     exams: Exam[]
 30 |     semesterPlanning: SemesterPlanning
 31 | }
 32 | 
 33 | const Settings = (props: SettingsProps) => {
 34 |     const { setClasses, defaultOpenValue, classes, semesterPlanning, exams, setExams } = props
 35 |     const [open, setOpen] = useState<boolean>(defaultOpenValue ?? false)
 36 |     const [kifyAccepted, setKifyAccepted] = useState(isKifyAccepted())
 37 |     const [tab, setTab] = useState<'classes' | 'exams' | 'semester' | 'others'>('classes')
 38 | 
 39 |     const handleKifyClick = (e: any) => {
 40 |         setKifyAccepted(e.target.checked)
 41 |         localStorage.setItem('kify_accepted', e.target.checked)
 42 | 
 43 |         if (e.target.checked) {
 44 |             setClasses(classes)
 45 |             setExams(exams)
 46 |         }
 47 |     }
 48 | 
 49 |     const deleteCache = () => {
 50 |         const confirmed = window.confirm(
 51 |             'Etes-vous sûr.e de vouloir supprimer le contenu du cache (les emplois du temps enregistrés)?'
 52 |         )
 53 |         if (confirmed) {
 54 |             localStorage.removeItem('a22-schedule')
 55 |             localStorage.removeItem('classes')
 56 |             localStorage.removeItem('exams')
 57 |             localStorage.removeItem('view')
 58 |         }
 59 |     }
 60 | 
 61 |     const renderTab = () => {
 62 |         switch (tab) {
 63 |             case 'classes':
 64 |                 return (
 65 |                     <SettingsClasses classes={classes} setClasses={setClasses} semesterPlanning={semesterPlanning} />
 66 |                 )
 67 |             case 'exams':
 68 |                 return (
 69 |                     <SettingsExams exams={exams} setExams={setExams} semesterPlanning={semesterPlanning} />
 70 |                 )
 71 |             case 'semester':
 72 |                 return (
 73 |                     <SettingsSemester semesterPlanning={semesterPlanning} />
 74 |                 )
 75 |             case 'others':
 76 |                 return (<>
 77 |                     <div className="settings-section">
 78 |                         <p>Accepte la mise en cache pour que ton emploi du temps soit sauvegardé sur ton appareil.</p>
 79 |                         <input
 80 |                             type={'checkbox'}
 81 |                             defaultChecked={kifyAccepted}
 82 |                             onClick={handleKifyClick}
 83 |                         />
 84 |                         <label>Accepter la mise en cache</label>
 85 |                         <p>
 86 |                             <button onClick={deleteCache}>
 87 |                                 Supprimer le cache
 88 |                             </button>
 89 |                         </p>
 90 |                     </div>
 91 |                     <div className="settings-section">
 92 |                         <p>Développé avec ❤️ par <a href='https://github.com/StephaneBranly'>Stéphane Branly</a>.</p>
 93 |                         <p><a href='https://github.com/StephaneBranly/ur-time-calendar'>Code disponible sur Github</a>.</p>
 94 |                         <p>Paye moi un ☕️ si tu veux me soutenir : <a href='https://www.paypal.com/paypalme/StephaneBranly'>paypal</a>.</p>
 95 |                     </div>
 96 |                     </>
 97 |                 )
 98 |         }
 99 |     }
100 | 
101 |     return open ? (
102 |         <div className="settings-modal-fragment">
103 |             <div
104 |                 className="settings-modal-background"
105 |                 onClick={() => setOpen(false)}
106 |             ></div>
107 |             <div className="settings-modal-content">
108 |                 {isMobile && <button className='settings-exit' onClick={() => setOpen(false)}>
109 |                                 Fermer x
110 |                             </button>}
111 |                 <h1 className='settings-title'>Paramètres</h1>
112 |                 <div className='settings-tabs'>
113 |                     <div className={tab === 'classes' ? 'settings-tab-active' : ''} onClick={() => setTab('classes')}>
114 |                         Classes <span className='settings-tab-count'>{classes.length}</span>
115 |                     </div>
116 |                     <div className={tab === 'exams' ? 'settings-tab-active' : ''} onClick={() => setTab('exams')}>
117 |                         Examens <span className='settings-tab-count'>{exams.length}</span>
118 |                     </div>
119 |                     <div className={tab === 'semester' ? 'settings-tab-active' : ''} onClick={() => setTab('semester')}>
120 |                         Semestre <span className='settings-tab-count'>{semesterPlanning.semesterName}</span>
121 |                     </div>
122 |                     <div className={tab === 'others' ? 'settings-tab-active' : ''} onClick={() => setTab('others')}>
123 |                         Autres
124 |                     </div>
125 |                 </div>
126 |                 {renderTab()}
127 |             </div>
128 |         </div>
129 |     ) : (
130 |         <div className="settings-button" onClick={() => setOpen(true)}>
131 |             <FiSettings />
132 |         </div>
133 |     )
134 | }
135 | 
136 | export default Settings
137 |

--------------------------------------------------------------------------------
/src/components/SettingsClass/SettingsClass.tsx:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     SettingsClass.tsx                                  ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 10:42:17 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import './SettingsClass.scss'
 16 | 
 17 | import { useState } from 'react'
 18 | import { Class } from 'utils'
 19 | import { weekAlternance } from 'types/weekAlternance'
 20 | import { classColor } from 'types/classColor'
 21 | import allColors from 'data/allColors'
 22 | 
 23 | export interface SettingsClassProps {
 24 |     class_: Class
 25 |     setClass: (newClass: Class | undefined) => void
 26 | }
 27 | 
 28 | const SettingsClass = (props: SettingsClassProps) => {
 29 |     const { class_, setClass } = props
 30 |     const [edit, setEdit] = useState<Class|undefined>(undefined)
 31 | 
 32 |     const handlerDelete = () => {
 33 |         const response = window.confirm('Voulez-vous vraiment supprimer cette classe ?')
 34 |         if (response) {
 35 |             setClass(undefined)
 36 |         }
 37 |     }
 38 | 
 39 |     const handlerSave = () => {
 40 |         setClass(edit)
 41 |         setEdit(undefined)
 42 |     }
 43 | 
 44 |     const forceEditUpdate = () => {
 45 |         setEdit(Object.assign(Object.create(Object.getPrototypeOf(edit)), edit))
 46 |     }
 47 | 
 48 |     return <div className='settings-class'>
 49 |         {edit ? <div className={`class-slot ${edit.color}`}>
 50 |             <div>{class_.prettyPrint()}</div>
 51 |             <div className="settings-class-editable-inputs">
 52 |                 <div className="settings-class-editable-input">
 53 |                     <label htmlFor="UVname">Nom de l'UV</label>
 54 |                     <input name="UVname" type='text' defaultValue={edit.UVname} onChange={(e) => {edit.UVname = e.target.value; forceEditUpdate()}} />
 55 |                 </div>
 56 |                 
 57 |                 <div className="settings-class-editable-input">
 58 |                     <label htmlFor="classType">Type de créneau</label>
 59 |                     <select name="classType" defaultValue={edit.classType} onChange={(e) => edit.classType = e.target.value}>
 60 |                         <option value="C">Cours</option>
 61 |                         <option value="D">TD</option>
 62 |                         <option value="T">TP</option>
 63 |                     </select>
 64 |                 </div>
 65 | 
 66 |                 <div className="settings-class-editable-input">
 67 |                     <label htmlFor="classReference">ID du créneau</label>
 68 |                     <input name="classReference" type='number' defaultValue={edit.classReference} onChange={(e) => edit.classReference = Number(e.target.value)}/>
 69 |                 </div>
 70 | 
 71 |                 <div className="settings-class-editable-input">
 72 |                     <label htmlFor="day">Jour</label>
 73 |                     <select name="day" defaultValue={edit.day} onChange={(e) => edit.day= e.target.value }>
 74 |                         <option value="LUNDI">Lundi</option>
 75 |                         <option value="MARDI">Mardi</option>
 76 |                         <option value="MERCREDI">Mercredi</option>
 77 |                         <option value="JEUDI">Jeudi</option>
 78 |                         <option value="VENDREDI">Vendredi</option>
 79 |                         <option value="SAMEDI">Samedi</option>
 80 |                         <option value="DIMANCHE">Dimanche</option>
 81 |                     </select>
 82 |                 </div>
 83 | 
 84 |                 <div className="settings-class-editable-input">
 85 |                     <label htmlFor="start">Début</label>
 86 |                     <input name="start" type='time' defaultValue={edit.start} onChange={(e) => edit.start= e.target.value}/>
 87 |                 </div>
 88 |                 
 89 |                 <div className="settings-class-editable-input">
 90 |                     <label htmlFor="end">Fin</label>
 91 |                     <input name="end" type='time' defaultValue={edit.end} onChange={(e) => edit.end= e.target.value}/>
 92 |                 </div>
 93 | 
 94 |                 <div className="settings-class-editable-input">
 95 |                     <label htmlFor="place">Lieu</label>
 96 |                     <input name="place" type='text' defaultValue={edit.place} onChange={(e) => edit.place= e.target.value}/>
 97 |                 </div>
 98 | 
 99 |                 <div className="settings-class-editable-input">
100 |                     <label htmlFor="week">Alternance</label>
101 |                     <select name="week" defaultValue={edit.week} onChange={(e) => edit.week= e.target.value as weekAlternance }>
102 |                         <option value={undefined}>Aucune</option>
103 |                         <option value="A">A</option>
104 |                         <option value="B">B</option>
105 |                     </select>
106 |                 </div>
107 | 
108 |                 <div className="settings-class-editable-input">
109 |                     <label htmlFor="color">Couleur</label>
110 |                     <select name="color" defaultValue={edit.color} onChange={(e) => {edit.color = e.target.value as classColor; forceEditUpdate()}} >
111 |                         {allColors.map((color) => <option value={color}>{color}</option>)}
112 |                     </select>
113 |                 </div>
114 |             </div>
115 |             <div className='settings-grouped-buttons'>
116 |                 <button onClick={() => handlerSave()}>Sauvegarder</button>
117 |                 <button onClick={() => setEdit(undefined)}>Annuler</button>
118 |                 <button onClick={() => handlerDelete()}>Supprimer</button>
119 |             </div>
120 |         </div> :
121 |             <div className={`class-slot ${class_.color} can-be-opened`}  onClick={() => setEdit(Object.assign(Object.create(Object.getPrototypeOf(class_)), class_))} >
122 |                 <div>{class_.prettyPrint()}</div>
123 |             </div>}
124 |     </div>
125 | }
126 | 
127 | export default SettingsClass
128 |

--------------------------------------------------------------------------------
/src/components/SettingsSemester/SettingsSemester.tsx:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     SettingsSemester.tsx                               ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 10:49:22 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import './SettingsSemester.scss'
 16 | 
 17 | import { DaySemesterOrganization, SemesterPlanning } from 'utils'
 18 | 
 19 | export interface SettingsSemesterProps {
 20 |     semesterPlanning: SemesterPlanning
 21 | }
 22 | 
 23 | const SettingsSemester = (props: SettingsSemesterProps) => {
 24 |     const { semesterPlanning } = props
 25 | 
 26 |     const days = semesterPlanning.referencedDays.sort((a, b) => {
 27 |         return a.date.getTime() - b.date.getTime() < 0 ? -1 : 1
 28 |     })
 29 | 
 30 |     const finauxDays = days.filter((day) => day.isFinal)
 31 |     const mediansDays = days.filter((day) => day.isMedian)
 32 | 
 33 |     const holidays = days.filter((day) => day.isHoliday)
 34 | 
 35 |     const feriesDays = days.filter((day) => day.isFerie)
 36 | 
 37 |     const becomesA = days.filter((day) => day.becomesA)
 38 | 
 39 |     const toRender = [
 40 |         ...finauxDays,
 41 |         ...mediansDays,
 42 |         ...holidays,
 43 |         ...feriesDays,
 44 |         ...becomesA,
 45 |     ].sort((a, b) => {
 46 |         return a.date.getTime() - b.date.getTime() < 0 ? -1 : 1
 47 |     })
 48 | 
 49 |     const renderDays = () => {
 50 |         const labelsStack = toRender.map((day) => [
 51 |             `${day.date.getDate()}/${
 52 |                 day.date.getMonth() + 1
 53 |             }/${day.date.getFullYear()}`,
 54 |             ...renderDayLabel(day),
 55 |         ])
 56 | 
 57 |         let currentId = 0
 58 |         return labelsStack.map((day, index) => {
 59 |             if (day[2] !== currentId) {
 60 |                 currentId = day[2] as number
 61 |                 if (
 62 |                     index !== labelsStack.length - 1 &&
 63 |                     labelsStack[index + 1][2] === currentId
 64 |                 )
 65 |                     return (
 66 |                         <div className="settings-semester_day" key={index}>
 67 |                             Du{' '}
 68 |                             <span className="settings-semester_day-date">
 69 |                                 {day[0]}
 70 |                             </span>
 71 |                             {day[1]}
 72 |                         </div>
 73 |                     )
 74 |                 else
 75 |                     return (
 76 |                         <div className="settings-semester_day" key={index}>
 77 |                             Le{' '}
 78 |                             <span className="settings-semester_day-date">
 79 |                                 {day[0]}
 80 |                             </span>
 81 |                             {day[1]}
 82 |                         </div>
 83 |                     )
 84 |             } else {
 85 |                 if (
 86 |                     index === labelsStack.length - 1 ||
 87 |                     labelsStack[index + 1][2] !== currentId
 88 |                 )
 89 |                     return (
 90 |                         <div className="settings-semester_day" key={index}>
 91 |                             au{' '}
 92 |                             <span className="settings-semester_day-date">
 93 |                                 {day[0]}
 94 |                             </span>
 95 |                         </div>
 96 |                     )
 97 |                 else return undefined
 98 |             }
 99 |         })
100 |     }
101 | 
102 |     const renderDayLabel = (day: DaySemesterOrganization) => {
103 |         if (day.becomesA)
104 |             return [
105 |                 <span className="settings-semester_day-label becomesA">
106 |                     Devient un {day.becomesA.toLowerCase()}
107 |                 </span>,
108 |                 1,
109 |             ]
110 |         if (day.isFinal)
111 |             return [
112 |                 <span className="settings-semester_day-label finaux">
113 |                     Finaux
114 |                 </span>,
115 |                 2,
116 |             ]
117 |         if (day.isMedian)
118 |             return [
119 |                 <span className="settings-semester_day-label medians">
120 |                     Médians
121 |                 </span>,
122 |                 3,
123 |             ]
124 |         if (day.isHoliday)
125 |             return [
126 |                 <span className="settings-semester_day-label vacances">
127 |                     Vacances
128 |                 </span>,
129 |                 4,
130 |             ]
131 |         if (day.isFerie)
132 |             return [
133 |                 <span className="settings-semester_day-label feries">
134 |                     Férié
135 |                 </span>,
136 |                 5,
137 |             ]
138 |         return [<></>, 0]
139 |     }
140 | 
141 |     return (
142 |         <>
143 |             <section className="settings-section">
144 |                 Contribuez au projet pour mettre à jour les calendriers des
145 |                 semestres à venir ;) Cela est rapide !
146 |             </section>
147 |             <section className="settings-section">
148 |                 Merci à <a href="https://github.com/S-cript-kiddie02">S-cript-kiddie02 </a>{' '}
149 |                 pour la mise à jour du semestre P25.
150 |             </section>
151 |             <section className="settings-section">
152 |                 Merci à <a href="https://github.com/wklover14">wklover14</a>{' '}
153 |                 pour la mise à jour du semestre A24.
154 |             </section>
155 |             <section className="settings-section">
156 |                 <h2 className="settings-subtitle">
157 |                     Semestre {semesterPlanning.semesterName}
158 |                 </h2>
159 |                 <div className="settings-week-alternance">
160 |                     <div className="settings-week-alternance-a">Semaine A</div>
161 |                     <div className="settings-week-alternance-b">Semaine B</div>
162 |                 </div>
163 |                 <div className="settings-semester">{renderDays()}</div>
164 |             </section>
165 |         </>
166 |     )
167 | }
168 | 
169 | export default SettingsSemester
170 |

--------------------------------------------------------------------------------
/src/components/SettingsExam/SettingsExam.tsx:
--------------------------------------------------------------------------------
  1 | /* *********************************************************************************************************************** */
  2 | /*  UTC Header                                                                                                             */
  3 | /*                                                        ::::::::::::::::::::       :::    ::: :::::::::::  ::::::::      */
  4 | /*     SettingsExam.tsx                                   ::::::::::::::::::::       :+:    :+:     :+:     :+:    :+:     */
  5 | /*                                                        ::::::::::::::+++#####+++  +:+    +:+     +:+     +:+            */
  6 | /*     By: branlyst <stephane.branly@etu.utc.fr>          ::+++##############+++     +:+    +:+     +:+     +:+            */
  7 | /*     https://github.com/StephaneBranly              +++##############+++::::       +#+    +:+     +#+     +#+            */
  8 | /*                                                      +++##+++::::::::::::::       +#+    +:+     +#+     +#+            */
  9 | /*                                                        ::::::::::::::::::::       +#+    +#+     +#+     +#+            */
 10 | /*                                                        ::::::::::::::::::::       #+#    #+#     #+#     #+#    #+#     */
 11 | /*     Update: 2022/12/13 18:05:47 by branlyst            ::::::::::::::::::::        ########      ###      ######## .fr  */
 12 | /*                                                                                                                         */
 13 | /* *********************************************************************************************************************** */
 14 | 
 15 | import './SettingsExam.scss'
 16 | 
 17 | import { useState } from 'react'
 18 | import { Exam } from 'utils'
 19 | 
 20 | export interface SettingsExamProps {
 21 |     exam: Exam
 22 |     setExam: (newClass: Exam | undefined) => void
 23 | }
 24 | 
 25 | const SettingsExam = (props: SettingsExamProps) => {
 26 |     const { exam, setExam } = props
 27 |     const [edit, setEdit] = useState<Exam | undefined>(undefined)
 28 | 
 29 |     const handlerDelete = () => {
 30 |         const response = window.confirm(
 31 |             'Voulez-vous vraiment supprimer cet examen ?'
 32 |         )
 33 |         if (response) {
 34 |             setExam(undefined)
 35 |         }
 36 |     }
 37 | 
 38 |     const handlerSave = () => {
 39 |         setExam(edit)
 40 |         setEdit(undefined)
 41 |     }
 42 | 
 43 |     const forceEditUpdate = () => {
 44 |         setEdit(Object.assign(Object.create(Object.getPrototypeOf(edit)), edit))
 45 |     }
 46 | 
 47 |     const handlerSetDate = (e: React.ChangeEvent<HTMLInputElement>) => {
 48 |         if (!edit) return
 49 |         const splitted = e.target.value.split('-')
 50 |         const startDate = new Date(
 51 |             Number(splitted[0]),
 52 |             Number(splitted[1]) - 1,
 53 |             Number(splitted[2])
 54 |         )
 55 |         const endDate = new Date(
 56 |             Number(splitted[0]),
 57 |             Number(splitted[1]) - 1,
 58 |             Number(splitted[2])
 59 |         )
 60 |         startDate.setMinutes(edit.start.getMinutes())
 61 |         startDate.setHours(edit.start.getHours())
 62 |         endDate.setMinutes(edit.end.getMinutes())
 63 |         endDate.setHours(edit.end.getHours())
 64 |         edit.start = startDate
 65 |         edit.end = endDate
 66 |     }
 67 | 
 68 |     const handlerSetTime = (
 69 |         e: React.ChangeEvent<HTMLInputElement>,
 70 |         target: 'start' | 'end'
 71 |     ) => {
 72 |         if (!edit) return
 73 |         const splitted = e.target.value.split(':')
 74 |         const date = new Date(edit.start)
 75 |         date.setMinutes(Number(splitted[1]))
 76 |         date.setHours(Number(splitted[0]))
 77 |         if (target === 'start') {
 78 |             edit.start = date
 79 |         } else {
 80 |             edit.end = date
 81 |         }
 82 |     }
 83 | 
 84 |     return (
 85 |         <div className="settings-exam">
 86 |             {edit ? (
 87 |                 <div className={`exam-slot`}>
 88 |                     <div>{exam.prettyPrint()}</div>
 89 |                     <div className="settings-exam-editable-inputs">
 90 |                         <div className="settings-exam-editable-input">
 91 |                             <label htmlFor="UVname">Nom de l'UV</label>
 92 |                             <input
 93 |                                 name="UVname"
 94 |                                 type="text"
 95 |                                 defaultValue={edit.UVname}
 96 |                                 onChange={(e) => {
 97 |                                     edit.UVname = e.target.value
 98 |                                     forceEditUpdate()
 99 |                                 }}
100 |                             />
101 |                         </div>
102 |                         <div className="settings-exam-editable-input">
103 |                             <label htmlFor="start">Début</label>
104 |                             <input
105 |                                 name="start"
106 |                                 type="date"
107 |                                 defaultValue={`${edit.start.getFullYear()}-${
108 |                                     edit.start.getMonth() + 1
109 |                                 }-${edit.start.getDate()}`}
110 |                                 onChange={handlerSetDate}
111 |                             />
112 |                             <input
113 |                                 name="start"
114 |                                 type="time"
115 |                                 defaultValue={edit.printTime(edit.start)}
116 |                                 onChange={(e) => handlerSetTime(e, 'start')}
117 |                             />
118 |                         </div>
119 |                         <div className="settings-exam-editable-input">
120 |                             <label htmlFor="end">Fin</label>
121 |                             <input
122 |                                 name="end"
123 |                                 type="time"
124 |                                 defaultValue={edit.printTime(edit.end)}
125 |                                 onChange={(e) => handlerSetTime(e, 'end')}
126 |                             />
127 |                         </div>
128 | 
129 |                         <div className="settings-exam-editable-input">
130 |                             <label htmlFor="place">Lieu</label>
131 |                             <input
132 |                                 name="place"
133 |                                 type="text"
134 |                                 defaultValue={edit.place}
135 |                                 onChange={(e) => (edit.place = e.target.value)}
136 |                             />
137 |                         </div>
138 | 
139 |                         {edit.type === 'final' && (
140 |                             <div className="settings-exam-editable-input">
141 |                                 <label htmlFor="seat">Place</label>
142 |                                 <input
143 |                                     name="seat"
144 |                                     type="text"
145 |                                     defaultValue={edit.seat}
146 |                                     onChange={(e) =>
147 |                                         (edit.seat = e.target.value)
148 |                                     }
149 |                                 />
150 |                             </div>
151 |                         )}
152 |                     </div>
153 |                     <div className="settings-grouped-buttons">
154 |                         <button onClick={() => handlerSave()}>
155 |                             Sauvegarder
156 |                         </button>
157 |                         <button onClick={() => setEdit(undefined)}>
158 |                             Annuler
159 |                         </button>
160 |                         <button onClick={() => handlerDelete()}>
161 |                             Supprimer
162 |                         </button>
163 |                     </div>
164 |                 </div>
165 |             ) : (
166 |                 <div
167 |                     className={`exam-slot can-be-opened`}
168 |                     onClick={() =>
169 |                         setEdit(
170 |                             Object.assign(
171 |                                 Object.create(Object.getPrototypeOf(exam)),
172 |                                 exam
173 |                             )
174 |                         )
175 |                     }
176 |                 >
177 |                     <div>{exam.prettyPrint()}</div>
178 |                 </div>
179 |             )}
180 |         </div>
181 |     )
182 | }
183 | 
184 | export default SettingsExam
185 |

--------------------------------------------------------------------------------