CSV2ics

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

TimeTable.tsx (4061B)

      1 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
      2 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
      3 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
      4 import { FormControl, InputLabel, MenuItem, Select, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
      5 import dayjs from "dayjs";
      6 import React from 'react';
      7 import TimeTablePresets from "./TimetablePresets.json";
      8 
      9 function timeTableType(
     10     period: number,
     11     start: Date,
     12     end: Date,
     13 ) {
     14     return {period, start, end};
     15 }
     16 
     17 var selectedPresetName:string;
     18 selectedPresetName = "島根大学";
     19 
     20 function setTimeTableData(presetName: string) {
     21     const timetableDate = [];
     22     const presetNumber = presetNames.indexOf(presetName);
     23     const periodQuantity = TimeTablePresets.presets[presetNumber].timetable.length;
     24     for (let i = 0; i < periodQuantity; i++){
     25         const startHour = TimeTablePresets.presets[presetNumber].timetable[i].start[0];
     26         const startMin = TimeTablePresets.presets[presetNumber].timetable[i].start[1];
     27 
     28         const endHour = TimeTablePresets.presets[presetNumber].timetable[i].end[0];
     29         const endMin = TimeTablePresets.presets[presetNumber].timetable[i].end[1];
     30 
     31         timetableDate.push(timeTableType(TimeTablePresets.presets[presetNumber].timetable[i].period,new Date(2022,1,1,startHour,startMin),new Date(2022,1,1,endHour,endMin)))
     32     }
     33     return timetableDate
     34 }
     35 
     36 const presetNames = setPresetName();
     37 
     38 function setPresetName() {
     39     const presetNames = [];
     40     var presetQuantity = TimeTablePresets.presets.length
     41     for (let i = 0; i < presetQuantity;i++){
     42         presetNames.push(TimeTablePresets.presets[i].PresetName);
     43     }
     44     return presetNames;
     45 }
     46 
     47 
     48 export default function TimeTable() {
     49 
     50     const [preset, setpreset] = React.useState<string | number>('');
     51     const [open, setOpen] = React.useState(false);
     52 
     53     const handleChange = (event: any) => {
     54         setpreset(event.target.value);
     55         selectedPresetName = event.target.value;
     56     };
     57   
     58     const handleClose = () => {
     59       setOpen(false);
     60     };
     61   
     62     const handleOpen = () => {
     63       setOpen(true);
     64     };
     65 
     66     return(
     67         <LocalizationProvider dateAdapter={AdapterDayjs}>
     68             <FormControl sx={{ m: 0, minWidth: 120 }}>
     69                 <InputLabel id="demo-controlled-open-select-label">preset</InputLabel>
     70                 <Select
     71                 labelId="TimeTablePreset"
     72                 id="TimeTablePreset"
     73                 open={open}
     74                 onClose={handleClose}
     75                 onOpen={handleOpen}
     76                 value={preset}
     77                 label="Preset"
     78                 onChange={handleChange}
     79                 fullWidth
     80                 >
     81                     {presetNames.map((preset) => (
     82                         <MenuItem key={preset} value={preset}>
     83                             {preset}
     84                         </MenuItem>
     85                     ))}
     86                 </Select>
     87             </FormControl>
     88             <Table>
     89                 <TableHead>
     90                     <TableCell>Period</TableCell>
     91                     <TableCell>Start</TableCell>
     92                     <TableCell>End</TableCell>
     93                 </TableHead>
     94                 <TableBody>
     95                     {
     96                         setTimeTableData(selectedPresetName).map((timeTableData) => (
     97                             <TableRow key={timeTableData.period}>
     98                                 <TableCell>{timeTableData.period}</TableCell>
     99                                 <TableCell>
    100                                     <TimePicker label="START" defaultValue={dayjs(timeTableData.start)}/>
    101                                 </TableCell>
    102                                 <TableCell>
    103                                     <TimePicker label="END" defaultValue={dayjs(timeTableData.end)}/>
    104                                 </TableCell>
    105                             </TableRow>
    106                         ))
    107                     }
    108                 </TableBody>
    109             </Table>
    110         </LocalizationProvider>
    111     );
    112 }