2015-10-03 07:06:56 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title></title>
|
2015-11-20 10:16:38 +08:00
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
|
2015-10-03 07:06:56 +08:00
|
|
|
<script src='/static/js/moment.min.js'></script>
|
|
|
|
|
<style>
|
|
|
|
|
.selected {
|
|
|
|
|
background: #8CF;
|
|
|
|
|
}
|
|
|
|
|
button.schedule {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
background: #FFF;
|
|
|
|
|
border: 1px solid #CCC;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2015-11-20 10:16:38 +08:00
|
|
|
<div class="container">
|
|
|
|
|
<h1>Confirm event scheduling</h1>
|
2015-10-03 07:06:56 +08:00
|
|
|
<div style="border:1px solid #eee;border-radius:3px;padding:10px">
|
|
|
|
|
<div style="padding:0 5px">
|
|
|
|
|
<div style="font-weight:bold;font-size:18px">{{ event.title }}</div>
|
|
|
|
|
<div>{{ event.location }}</div>
|
|
|
|
|
<div>{{ event.description }}</div>
|
|
|
|
|
<span style="font-size:13px;color:#aaa">Click to choose another time:</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display:flex;flex-wrap:wrap;padding:10px 0" id="days-container"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<form action="/event/{{selected_key}}" method="post">
|
|
|
|
|
<button type="submit" class="schedule">Schedule!</button>
|
|
|
|
|
</form>
|
2015-11-20 10:16:38 +08:00
|
|
|
</div>
|
2015-10-03 07:06:56 +08:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
events = {{ times_json|tojson|safe }}
|
|
|
|
|
console.log(events[0].start,events[0].end)
|
|
|
|
|
times = events.map(function(e) {
|
|
|
|
|
return {
|
2015-11-20 10:16:38 +08:00
|
|
|
date: moment(e.start*1000).format("dddd, MMM Do"),
|
|
|
|
|
time: moment(e.start*1000).format("h:mma") + "-" +
|
|
|
|
|
moment(e.end*1000).format("h:mma"),
|
2015-10-03 07:06:56 +08:00
|
|
|
serverKey: e.key
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
byDay = {};
|
|
|
|
|
times.forEach(function(t){
|
|
|
|
|
if(byDay[t.date] === undefined)
|
|
|
|
|
byDay[t.date] = [];
|
|
|
|
|
byDay[t.date].push(t);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
daysContainer = document.getElementById("days-container");
|
|
|
|
|
for(var dayText in byDay){
|
|
|
|
|
var dayTimes = byDay[dayText];
|
|
|
|
|
|
|
|
|
|
var block = document.createElement("div");
|
|
|
|
|
block.setAttribute("style","flex-grow:1;margin:5px;border:1px solid #ddd;border-radius:3px");
|
|
|
|
|
daysContainer.appendChild(block);
|
|
|
|
|
|
|
|
|
|
var title = document.createElement("div");
|
|
|
|
|
title.setAttribute("style","text-align:center;font-size:13px;background:#eee;color:#666;padding:2px 4px")
|
|
|
|
|
title.appendChild(document.createTextNode(dayText.toUpperCase()));
|
|
|
|
|
block.appendChild(title);
|
|
|
|
|
|
|
|
|
|
var times = document.createElement("div");
|
|
|
|
|
times.setAttribute("style","padding:5px");
|
|
|
|
|
block.appendChild(times);
|
|
|
|
|
|
|
|
|
|
dayTimes.forEach(function(t){
|
|
|
|
|
var time = document.createElement("div");
|
|
|
|
|
time.setAttribute("style","padding:2px 0");
|
|
|
|
|
if(t.serverKey === "{{ selected_key }}")
|
|
|
|
|
time.setAttribute("class","selected")
|
|
|
|
|
times.appendChild(time);
|
|
|
|
|
|
|
|
|
|
var link = document.createElement("a");
|
|
|
|
|
link.setAttribute("style","text-decoration:none");
|
|
|
|
|
link.setAttribute("href","/event/"+ t.serverKey);
|
|
|
|
|
link.appendChild(document.createTextNode(t.time));
|
|
|
|
|
time.appendChild(link);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
