mirror of
https://github.com/13hannes11/UU_hci_prototype.git
synced 2024-09-04 01:11:00 +02:00
238 lines
7.8 KiB
HTML
238 lines
7.8 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 id="task_schdeuler_dialogue" style="width: 300px; height: 200px; position: absolute; z-index: 100; background-color: aqua; visibility: hidden;">
|
|
|
|
</div>
|
|
|
|
<div id="schedule_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>
|
|
|
|
<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 src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
|
|
<script src="assets/js/main.js"></script>
|
|
<script>
|
|
reset = function() {
|
|
div = document.getElementById("schedule_div");
|
|
div.classList.remove("js-schedule-loaded");
|
|
div.classList.add("cd-schedule--loading");
|
|
init();
|
|
}
|
|
|
|
appointment_dict = {}
|
|
|
|
current_id = 0
|
|
generate_id = function() {
|
|
return current_id++;
|
|
}
|
|
|
|
populate_task_scheduler = function(appointmentId, posX, posY){
|
|
var appointment = appointment_dict[appointmentId];
|
|
var domElement = document.getElementById("task_schdeuler_dialogue");
|
|
domElement.style.left = posX + "px";
|
|
domElement.style.top = posY + "px";
|
|
domElement.style.visibility = "visible";
|
|
|
|
var innerHTML = appointment.name;
|
|
innerHTML += `<br><label for="start-input">Start Time: </label><input type="time" id="start-input" required>`;
|
|
innerHTML += `<br><label for="end-input">End Time: </label><input type="time" id="end-input" required>`;
|
|
innerHTML += "<br><button onclick='document.getElementById(\"task_schdeuler_dialogue\").style.visibility = \"hidden\"' >Cancel</button>"
|
|
innerHTML += "<button>Okay</button>";
|
|
domElement.innerHTML = innerHTML;
|
|
}
|
|
|
|
class Appointment {
|
|
constructor(name, start, end, type = 4) { // 1: blue, 2: dark blue, 3: green, 4: yellow
|
|
this.id = "appointment_" + generate_id();
|
|
this.name = name;
|
|
this.start = start;
|
|
this.end = end;
|
|
this.type = type; //needs to be in [1, 4]
|
|
this.parent = null;
|
|
|
|
appointment_dict[this.id] = this;
|
|
}
|
|
|
|
clicked = function(event){
|
|
alert("I was clicked");
|
|
this.parent.remove_child(this.id)
|
|
this.parent.rebulid_html();
|
|
}
|
|
|
|
set_parent = function(parent) {
|
|
this.parent = parent;
|
|
}
|
|
|
|
as_html = function() {
|
|
var result = `<li id="${ this.id }" 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>`;
|
|
return result;
|
|
}
|
|
}
|
|
class EmptySpaceAppointment extends Appointment {
|
|
constructor(start, end, type = 0) {
|
|
super("Free", start, end, type);
|
|
}
|
|
clicked = function(event){
|
|
populate_task_scheduler(this.id, event.pageX, event.pageY)
|
|
}
|
|
}
|
|
|
|
|
|
class Day {
|
|
constructor(name, appointment_list) {
|
|
this.name = name
|
|
this.appointment_list = appointment_list;
|
|
this.appointment_list.forEach(appointment => {
|
|
appointment.set_parent(this);
|
|
});
|
|
}
|
|
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
|
|
}
|
|
set_parent = function(parent) {
|
|
this.parent = parent
|
|
}
|
|
|
|
rebulid_html = function(){
|
|
this.parent.rebulid_html();
|
|
}
|
|
|
|
remove_child = function(id){
|
|
this.appointment_list = this.appointment_list.filter(child => child.id != id);
|
|
}
|
|
}
|
|
|
|
class Schedule {
|
|
constructor(day_list){
|
|
this.day_list = day_list
|
|
this.day_list.forEach(day => {
|
|
day.set_parent(this);
|
|
});
|
|
}
|
|
as_html = function() {
|
|
var result = '<ul>';
|
|
this.day_list.forEach(day => {
|
|
result += day.as_html();
|
|
});
|
|
result += '</ul>';
|
|
return result;
|
|
}
|
|
|
|
rebulid_html = function() {
|
|
document.getElementById("calendar_wrapper").innerHTML = this.as_html()
|
|
reset();
|
|
}
|
|
}
|
|
var schedule = new Schedule([
|
|
new Day("Monday", [
|
|
new EmptySpaceAppointment("9:00", "9:30"),
|
|
new Appointment("Lecture HCI", "9:30", "11:00", 4),
|
|
new EmptySpaceAppointment("11:00", "12:00"),
|
|
new Appointment("Lecture Analysis", "12:00", "13:30", 4),
|
|
new EmptySpaceAppointment("13:30", "17:00"),
|
|
new Appointment("Innebandy", "17:00", "18:30", 4),
|
|
]),
|
|
new Day("Tuesday", [
|
|
new EmptySpaceAppointment("9:00", "16:30"),
|
|
new Appointment("Group Meeting", "16:30", "18:30", 4),
|
|
]),
|
|
new Day("Wednesday", [
|
|
new EmptySpaceAppointment("9:00", "12:00"),
|
|
new Appointment("Lecture HCI", "12:00", "13:30", 4),
|
|
new EmptySpaceAppointment("13:30", "15:00"),
|
|
new Appointment("Dentist", "15:00", "16:00", 4),
|
|
new EmptySpaceAppointment("16:00", "16:30"),
|
|
new Appointment("Lecture Swedish", "16:30", "18:30", 4),
|
|
]),
|
|
new Day("Thursday", [
|
|
new EmptySpaceAppointment("9:00", "9:30"),
|
|
new Appointment("Lecture Analysis", "9:30", "11:00", 4),
|
|
new EmptySpaceAppointment("11:00", "14:00"),
|
|
new Appointment("Fika", "14:00", "14:45", 4),
|
|
new EmptySpaceAppointment("14:45", "18:30"),
|
|
]),
|
|
new Day("Friday", [
|
|
new Appointment("Seminar: Discrimination", "9:00", "13:00", 4),
|
|
new EmptySpaceAppointment("13:00", "16:00"),
|
|
new Appointment("Gask", "16:00", "18:30", 4)
|
|
]),
|
|
new Day("Saturday", [
|
|
new EmptySpaceAppointment("9:00", "18:30"),
|
|
]),
|
|
new Day("Sunday", [
|
|
new EmptySpaceAppointment("9:00", "18:30"),
|
|
])
|
|
]);
|
|
|
|
handleEvent = function(event, id) {
|
|
appointment_dict[id].clicked(event);
|
|
}
|
|
|
|
schedule.rebulid_html();
|
|
init();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |