mirror of
https://github.com/13hannes11/UU_hci_prototype.git
synced 2024-09-04 01:11:00 +02:00
first commit
This commit is contained in:
329
index.html
Normal file
329
index.html
Normal file
@@ -0,0 +1,329 @@
|
||||
<!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 = 1) {
|
||||
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("Test", "9:00", "10:00", 1),
|
||||
new Appointment("Test", "17:00", "18:00", 1),
|
||||
]),
|
||||
new Day("Tuesday", [
|
||||
|
||||
]),
|
||||
new Day("Wednesday", [
|
||||
|
||||
]),
|
||||
new Day("Thursday", [
|
||||
|
||||
]),
|
||||
new Day("Friday", [
|
||||
|
||||
]),
|
||||
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>
|
||||
Reference in New Issue
Block a user