Mailspring/internal_packages/quick-schedule/backend/templates/show_event.html

94 lines
3.6 KiB
HTML
Raw Normal View History

2015-10-03 07:06:56 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Schedule: {{ event.title }}</title>
<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>
<script src='/static/js/moment-timezone-with-data.min.js'></script>
2015-10-03 07:06:56 +08:00
<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>
<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>
</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 {
date: moment(e.start*1000).format("dddd, MMM Do"),
time: moment(e.start*1000).format("h:mma") + "-" +
moment(e.end*1000).format("h:mma")+ " (" + moment().tz(moment.tz.guess()).format("z") + ")",
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>