Scheduling-App/script.js at main · ehuieric/Scheduling-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
$(function () {

   const date = moment().format("dddd, MMMM Do YYYY, h:mm:ss a");
   const timeString =  `${moment().hours()}:${moment().minutes()}`;
   const currentTime =  moment(timeString, 'HH:mm');
   const timeslots = [];
   let scheduledEvent = JSON.parse(window.localStorage.getItem('calendar')) ;

    // Get timeslots
    for(let i = 9 ; i < 18; i++) {

        if(i < 12) {
            // from 9AM t0 11AM
            timeslots.push({
                displayTime: i + `AM`,
                time: i + ':00',
                event: ''
            });
        } else if(i > 12) {
            // from 1PM to 5PM
            timeslots.push({
                displayTime: i - 12 + 'PM',
                time: i + ':00',
                event: ''
            });
        } else {
            // 12Pm
            timeslots.push({
                displayTime: i + 'PM',
                time: i + ':00',
                event: ''
            });
        }
    }

    if(!scheduledEvent) {
        window.localStorage.setItem('calendar', JSON.stringify(timeslots));
        scheduledEvent = JSON.parse(window.localStorage.getItem('calendar')) ;
    }


    // Create table row for each time slots
    for(let i = 0 ; i < timeslots.length ; i++) {

        //Compare calendarTime to current time
        const calendarTime =moment(timeslots[i].time, 'HH:mm'); ;
        const timeIsPassed = moment(currentTime).isAfter(calendarTime, 'hour');
        const timeIsNow = moment(currentTime).isSame(calendarTime, 'hour');

        $('#tablebody').append(`<tr>
                                    <th scope="row">${timeslots[i].displayTime}</th>
                                    <td class="middleCol" id="middleCol-${i}">
                                        <input type="text" class="input" id="event-${i}" value="${scheduledEvent[i].event}" />
                                    </td>
                                    <td class="rightCol">
                                        <button class="submitBtn" id="btn-${i}" >
                                            <i class="fas fa-calendar-plus"></i>
                                        </button>
                                    </td>
                                </tr>`);


        // Apply css based on input
        let inputValue = $(`#event-${i}`).val();

         // Apply css based on time
         if(timeIsPassed === true) {
            $('.middleCol').css('background-color', 'gray');
         }


        if(timeIsNow) {
            $(`#middleCol-${i}`).addClass('red');
        }

        // click events
        $(`#btn-${i}`).on('click', function(e) {
            e.preventDefault();
            //Get input field value
           inputValue = $(`#event-${i}`).val();
           scheduledEvent[i].event = inputValue;
           $(`#event-${i}`).val(inputValue);

           window.localStorage.setItem('calendar', JSON.stringify(scheduledEvent));

        });


    }


    $('#currentDay').text(date);

});