CS178-Input/base8.html at main · rezashamji/CS178-Input · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://unpkg.com/fullcalendar@5/main.min.css' rel='stylesheet' />
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Scheduling Application</title>
    <!--Styling carried over from homepage with addition of calendar styling & instructions styling-->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #e9f3f7;
        }
        #calendarTitle {
            text-align: center;
            color: #333;
            margin-bottom: 1em;
        }
        .logo-header {
            position: absolute;
            top: 0;
            left: 0;
            margin: 10px;
            display: flex;
            align-items: center;
        }
        .logo-header img {
            width: 50px;
            margin-right: 10px;
        }
        .logo-header .logo-text {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        .instructions-container {
            text-align: center;
        }
        .instructions {
            background-color: #c9e4f0;
            border: 1px solid #007bff;
            padding: 20px;
            margin: 20px auto;
            border-radius: 5px;
            display: inline-block;
            max-width: 100%;
            position: relative;
            top: 40px;
            left: 150px;
        }
        .instructions h4 {
        font-weight: 700; /* Bold the Instructions heading */
        }

        .instructions ol {
        padding-left: 20px;
        }

        .instructions li {
        margin-bottom: 10px;
        line-height: 1.6;
        }
        #calendar {
        background-color: white; /* Sets the calendar's background to white */
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /*CHAT GPT helped with adding the shadow element*/
    }
    </style>
</head>
<body>
    <div class="logo-header">
        <img src="{{ url_for('static', filename='img/doodle.png') }}" alt="Dog Logo">
        <div class="logo-text">Doodle Dogs</div>
    </div>
    <div class="instructions">
        <h4>Instructions:</h4>
        <ol>
            <li>Select times when you are free. Click and drag down to expand your selection, move slots across days, or drag up to decrease your time block.</li>
            <li>Click the time block to delete it.</li>
            <li>Click the "Save Selections" button to lock in your time blocks. Time blocks cannot be changed after this point unless you restart.</li>
            <li>Select your most preferred time blocks by clicking on it, and then submit your choices by pressing the "Finalize Selections" button.</li>
        </ol>
    </div>
    <div class="container mt-5">
        <button id="saveSelections" class="btn btn-primary mb-3">Save Selections</button>
        <button id="finalizeSelections" class="btn btn-secondary mb-3" style="display:none;">Finalize Selections</button>
        <div id='calendar'></div>
        <div id="preferredSlotsDisplay" class="mt-3"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src='https://unpkg.com/fullcalendar@5/main.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var selectionsLocked = false; // Track whether selections are locked
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'timeGridWeek',
                slotDuration: '00:15:00',
                selectable: true,
                editable: true, // Allows dragging and resizing
                eventResizableFromStart: true, // Allows resizing from the event's start
                eventDurationEditable: true, // Allows event durations to be editable
                eventStartEditable: true, // Allows events to be draggable

                select: function(info) {
                    if (selectionsLocked) {
                        console.log("Selections are locked. No more selections allowed.");
                        calendar.unselect();
                        return;
                    }
            // Find any events that overlap with the selected time slot
            var overlappingEvents = calendar.getEvents().filter(function(event) {
                return (event.start < info.end && event.end > info.start);
            });

            var newEventStart = info.start;
            var newEventEnd = info.end;

            // Determine the earliest start and the latest end from the overlapping events
            if (overlappingEvents.length > 0) {
                overlappingEvents.forEach(function(event) {
                    if (event.start < newEventStart) {
                        newEventStart = event.start;
                    }
                    if (event.end > newEventEnd) {
                        newEventEnd = event.end;
                    }
                    event.remove(); // Remove overlapping events
                });
            }

            // Add a new event with the merged time range
            calendar.addEvent({
                start: newEventStart,
                end: newEventEnd,
                allDay: info.allDay,
                backgroundColor: '#bae8bc', // Use the initial color for selections
                extendedProps: {
                    isPreferred: false // Custom property for preferred status
                }
            });

            calendar.unselect(); // Clear the current selection
        },

                eventClick: function(info) {
                    if (selectionsLocked) {
                        // Toggle preferred state and color on click
                        let isPreferred = info.event.extendedProps.isPreferred;
                        info.event.setExtendedProp('isPreferred', !isPreferred);
                        info.event.setProp('backgroundColor', !isPreferred ? '#4CAF50' : '#ff9f89');
                    }
                    if (!selectionsLocked) {
        // Remove the event on click only if selections are not locked
        info.event.remove();
    }
                },
                eventDrop: function(info) { if (selectionsLocked) info.revert(); },
                eventResize: function(info) { if (selectionsLocked) info.revert(); },
            });

            calendar.render();

            $('#saveSelections').click(function() {
                selectionsLocked = true; // Lock selections
                 // Disable or hide the "Save Selections" button
                 $(this).prop('disabled', true).hide(); // This line disables and hides the button

                // Show the "Finalize Selections" button
                $('#finalizeSelections').show();

                alert("Selections are locked. Click on a selection to mark it as preferred.");
            });

            $('#finalizeSelections').click(function() {
    var preferredEvents = calendar.getEvents().filter(function(event) {
        return event.extendedProps.isPreferred;
    });

    var preferredSlots = preferredEvents.map(function(event) {
        return {
            start: event.start.toISOString(),
            end: event.end.toISOString(),
            isPreferred: event.extendedProps.isPreferred
        };
    });

    // Store the preferred slots in localStorage
    localStorage.setItem('preferredTimeSlots', JSON.stringify(preferredSlots));

    // Navigate to the thank you page
    window.location.href = '/static/thank_you.html';
    });

        });

        function savePreferredTimeSlots(calendar) {
            var preferredEvents = calendar.getEvents().filter(function(event) {
                return event.extendedProps.isPreferred;
            });

            var preferredSlotsText = preferredEvents.map(function(event) {
                return event.start.toLocaleString() + ' to ' + event.end.toLocaleString();
            }).join('\n');

            document.getElementById('preferredSlotsDisplay').textContent = 'Preferred Time Slots:\n' + preferredSlotsText;
        }
    </script>
</body>
</html>