mirror of
https://github.com/13hannes11/UU_hci_prototype.git
synced 2024-09-04 01:11:00 +02:00
334 lines
12 KiB
HTML
334 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script>document.getElementsByTagName("html")[0].className += " js";</script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<title>Schedule Template | CodyHouse</title>
|
|
</head>
|
|
<body>
|
|
<!-- Buttons to add to scheduled elements -->
|
|
|
|
<div class="cd-schedule cd-schedule--loading margin-top-lg margin-bottom-lg js-cd-schedule">
|
|
<div class="cd-schedule__timeline">
|
|
<ul>
|
|
<li><span>09:00</span></li>
|
|
<li><span>09:30</span></li>
|
|
<li><span>10:00</span></li>
|
|
<li><span>10:30</span></li>
|
|
<li><span>11:00</span></li>
|
|
<li><span>11:30</span></li>
|
|
<li><span>12:00</span></li>
|
|
<li><span>12:30</span></li>
|
|
<li><span>13:00</span></li>
|
|
<li><span>13:30</span></li>
|
|
<li><span>14:00</span></li>
|
|
<li><span>14:30</span></li>
|
|
<li><span>15:00</span></li>
|
|
<li><span>15:30</span></li>
|
|
<li><span>16:00</span></li>
|
|
<li><span>16:30</span></li>
|
|
<li><span>17:00</span></li>
|
|
<li><span>17:30</span></li>
|
|
<li><span>18:00</span></li>
|
|
</ul>
|
|
</div> <!-- .cd-schedule__timeline -->
|
|
|
|
<!--<div class="cd-schedule__events">
|
|
<ul>
|
|
<li class="cd-schedule__group">
|
|
<div class="cd-schedule__top-info"><span>Monday</span></div>
|
|
|
|
<ul>
|
|
<li class="cd-schedule__event">
|
|
<a data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Abs Circuit</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2" href="#0">
|
|
<em class="cd-schedule__name">Rowing Workout</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="14:00" data-end="15:15" data-content="event-yoga-1" data-event="event-3" href="#0">
|
|
<em class="cd-schedule__name">Yoga Level 1</em>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="cd-schedule__group">
|
|
<div class="cd-schedule__top-info"><span>Tuesday</span></div>
|
|
|
|
<ul>
|
|
<li class="cd-schedule__event">
|
|
<a data-start="10:00" data-end="11:00" data-content="event-rowing-workout" data-event="event-2" href="#0">
|
|
<em class="cd-schedule__name">Rowing Workout</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="11:30" data-end="13:00" data-content="event-restorative-yoga" data-event="event-4" href="#0">
|
|
<em class="cd-schedule__name">Restorative Yoga</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="13:30" data-end="15:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Abs Circuit</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="15:45" data-end="16:45" data-content="event-yoga-1" data-event="event-3" href="#0">
|
|
<em class="cd-schedule__name">Yoga Level 1</em>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="cd-schedule__group">
|
|
<div class="cd-schedule__top-info"><span>Wednesday</span></div>
|
|
|
|
<ul>
|
|
<li class="cd-schedule__event">
|
|
<a data-start="09:00" data-end="10:15" data-content="event-restorative-yoga" data-event="event-4" href="#0">
|
|
<em class="cd-schedule__name">Restorative Yoga</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="10:45" data-end="11:45" data-content="event-yoga-1" data-event="event-3" href="#0">
|
|
<em class="cd-schedule__name">Yoga Level 1</em>
|
|
<div style="white-space: nowrap;">
|
|
<button onclick="this.parentElement.style.visibility = 'hidden'">Accept</button>
|
|
<button onclick="this.parentElement.parentElement.style.visibility = 'hidden'">Remove</button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="8:00" data-end="10:45" data-content="event-rowing-workout" data-event="event-2" href="#0">
|
|
<em class="cd-schedule__name">Rowing Workout</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="13:45" data-end="15:00" data-content="event-yoga-1" data-event="event-3" href="#0">
|
|
<em class="cd-schedule__name">Yoga Level 1</em>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="cd-schedule__group">
|
|
<div class="cd-schedule__top-info"><span>Thursday</span></div>
|
|
|
|
<ul>
|
|
<li class="cd-schedule__event">
|
|
<a data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Abs Circuit</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="12:00" data-end="13:45" data-content="event-restorative-yoga" data-event="event-4" href="#0">
|
|
<em class="cd-schedule__name">Restorative Yoga</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="15:30" data-end="16:30" data-content="event-abs-circuit" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Abs Circuit</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="17:00" data-end="18:30" data-content="event-rowing-workout" data-event="event-2" href="#0">
|
|
<em class="cd-schedule__name">Rowing Workout</em>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="cd-schedule__group">
|
|
<div class="cd-schedule__top-info"><span>Friday</span></div>
|
|
|
|
<ul>
|
|
<li class="cd-schedule__event">
|
|
<a data-start="10:00" data-end="11:00" data-content="event-rowing-workout" data-event="event-2" href="#0">
|
|
<em class="cd-schedule__name">Rowing Workout</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="12:30" data-end="14:00" data-content="event-abs-circuit" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Abs Circuit</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="15:45" data-end="16:45" data-content="event-yoga-1" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Yoga Level 1</em>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="cd-schedule__group">
|
|
<div class="cd-schedule__top-info"><span>Saturday</span></div>
|
|
|
|
<ul>
|
|
<li class="cd-schedule__event">
|
|
<a data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Abs Circuit</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2" href="#0">
|
|
<em class="cd-schedule__name">Rowing Workout</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="14:00" data-end="15:15" data-content="event-yoga-1" data-event="event-3" href="#0">
|
|
<em class="cd-schedule__name">Yoga Level 1</em>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="cd-schedule__group">
|
|
<div class="cd-schedule__top-info"><span>Sunday</span></div>
|
|
|
|
<ul>
|
|
<li class="cd-schedule__event">
|
|
<a data-start="09:30" data-end="10:30" data-content="event-abs-circuit" data-event="event-1" href="#0">
|
|
<em class="cd-schedule__name">Abs Circuit</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="11:00" data-end="12:30" data-content="event-rowing-workout" data-event="event-2" href="#0">
|
|
<em class="cd-schedule__name">Rowing Workout</em>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="cd-schedule__event">
|
|
<a data-start="14:00" data-end="15:15" data-content="event-yoga-1" data-event="event-3" href="#0">
|
|
<em class="cd-schedule__name">Yoga Level 1</em>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
-->
|
|
<div id="calendar_wrapper" class="cd-schedule__events">
|
|
|
|
</div>
|
|
|
|
<div class="cd-schedule-modal">
|
|
<header class="cd-schedule-modal__header">
|
|
<div class="cd-schedule-modal__content">
|
|
<span class="cd-schedule-modal__date"></span>
|
|
<h3 class="cd-schedule-modal__name"></h3>
|
|
</div>
|
|
|
|
<div class="cd-schedule-modal__header-bg"></div>
|
|
</header>
|
|
|
|
<div class="cd-schedule-modal__body">
|
|
<div class="cd-schedule-modal__event-info"></div>
|
|
<div class="cd-schedule-modal__body-bg"></div>
|
|
</div>
|
|
|
|
<a href="#0" class="cd-schedule-modal__close text-replace">Close</a>
|
|
</div>
|
|
|
|
<div class="cd-schedule__cover-layer"></div>
|
|
</div> <!-- .cd-schedule -->
|
|
<script>
|
|
class Appointment {
|
|
constructor(name, start, end, type = 4) { // 1: blue, 2: dark blue, 3: green, 4: yellow
|
|
this.name = name;
|
|
this.start = start;
|
|
this.end = end;
|
|
this.type = type; //needs to be in [1, 4]
|
|
}
|
|
|
|
as_html = function() {
|
|
return `<li class="cd-schedule__event">
|
|
<a data-start="${ this.start }" data-end="${ this.end }" data-content="event-yoga-1" data-event="event-${this.type}" href="#0">
|
|
<em class="cd-schedule__name">${this.name}</em>
|
|
</a>
|
|
</li>`
|
|
}
|
|
}
|
|
class Day {
|
|
constructor(name, appointment_list) {
|
|
this.name = name
|
|
this.appointment_list = appointment_list;
|
|
}
|
|
as_html = function() {
|
|
var result = `<li class="cd-schedule__group"><div class="cd-schedule__top-info"><span> ${ this.name }</span></div><ul>`;
|
|
this.appointment_list.forEach(appoinment => {
|
|
result += appoinment.as_html();
|
|
});
|
|
result += '</ul></li>';
|
|
return result
|
|
}
|
|
}
|
|
|
|
class Schedule {
|
|
constructor(day_list){
|
|
this.day_list = day_list
|
|
}
|
|
as_html = function() {
|
|
var result = '<ul>';
|
|
this.day_list.forEach(day => {
|
|
result += day.as_html();
|
|
});
|
|
result += '</ul>';
|
|
return result;
|
|
}
|
|
}
|
|
document.getElementById("calendar_wrapper").innerHTML += new Schedule([
|
|
new Day("Monday", [
|
|
new Appointment("Lecture HCI", "9:30", "11:00", 4),
|
|
new Appointment("Lecture Analysis", "12:00", "13:30", 4),
|
|
new Appointment("Innebandy", "17:00", "18:30", 4),
|
|
]),
|
|
new Day("Tuesday", [
|
|
new Appointment("Group Meeting", "16:30", "18:30", 4),
|
|
]),
|
|
new Day("Wednesday", [
|
|
new Appointment("Lecture HCI", "12:00", "13:30", 4),
|
|
new Appointment("Dentist", "15:00", "16:00", 4),
|
|
new Appointment("Lecture Swedish", "16:30", "18:30", 4),
|
|
]),
|
|
new Day("Thursday", [
|
|
new Appointment("Lecture Analysis", "9:30", "11:00", 4),
|
|
new Appointment("Fika", "14:00", "14:45", 4),
|
|
]),
|
|
new Day("Friday", [
|
|
new Appointment("Seminar: Discrimination", "9:00", "13:00", 4),
|
|
new Appointment("Gask", "16:00", "18:30", 4)
|
|
]),
|
|
new Day("Saturday", [
|
|
|
|
]),
|
|
new Day("Sunday", [
|
|
|
|
])
|
|
]).as_html();
|
|
</script>
|
|
<script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html> |