-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
102 lines (77 loc) · 4.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MARTA Mobility Test</title>
</head>
<body>
<div id="mobility-eta">
</div>
<script type="text/javascript">
var martaResponse = {};
var bookings = [];
var clientName = "";
window.onload = init;
function init() {
getTrips().then(
function() {
showTrips();
setMarker();
}
)
}
function getTrips(username, password) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('POST', "scrape.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onload = function() {
if (xhr.readyState == 4 && xhr.status === 200) {
resolve(handleMartaData(xhr.responseText));
} else {
reject(Error('Request failed, status was ' + xhr.statusText));
}
};
xhr.send(null); //"providedUsername=" + username + "&providedPassword=" + password);
});
}
function handleMartaData(xhrResponse) {
martaResponse = JSON.parse(xhrResponse);
bookings = martaResponse[0].bookings;
clientName = martaResponse[0].clientName;
}
function showTrips() {
var htmlBuffer =
'<div class="bookings-wrapper" style="display: inline-block;padding:20px;font-size: 14px;text-align: center;font-family: sans-serif;"><div class="client-info text-align-center"> Hi, <b>' +
clientName + '</b> </div>' + '<h1>Your Upcoming Trips </h1>';
bookings.forEach(function(booking) {
htmlBuffer +=
'<div class="booking" style="box-shadow: 0 0 3px 2px rgba(200,200,200,0.7); border-radius: 4px; margin: 10px; padding: 0 10px 10px 8px; padding-bottom: 6px; width: 310px; background-color:#fff; text-align: center; display:inline-block;"> <div class="date-and-id" id="date-and-id"> <span class="display-date"><h2 style="border:0; margin-bottom: 4px"><b><u>' +
booking.displayDate + '</b></u></h2></span><span><b>Booking ID</b>: ' + booking.bookingID +
'</span> <span><b>Ready Time</b>: ' + booking.displayReadyTime +
'</span></div><div class="booking-status" style="margin-top: 8px; margin-bottom: 7px;"><span style="font-weight:bold; font-size: 16px;">Trip Status</span><br> ' + booking.status + '<span class="late-status">' + (booking.statusDescription || ".") + '</span></div>' + '<div class="progress-wrapper" style="display: none;margin-bottom: 10px;font-size: 12px; "> <div class="labels" style="color: #fff; padding-top: 3px; text-align: left; background-color:#000"> <div class="label left" style="width: auto;text-align: left;display: inline-block;margin-left: 3px;padding: 0 3px;"> <b>Start Window</b><br>' +
booking.displayReadyTime + '</div> <div class="label center" style="width: auto;text-align: left;display: inline-block;transform: translateX(45px);padding: 0 3px;"><b>End Window</b><br>' + booking.displayEndWindow +
'</div></div> <div class="outer" style="text-align: left; width: 240px; background-color: #111; padding: 2px;"> <div class="inner" style="height: 18px; background-color: #595; background: linear-gradient(to right, #595 0%, #ee5 50%, #f55 80%);"> <span class="eta label" style="position: relative;display: inline-block;box-sizing: border-box;height: 100%;padding-top: 5px;text-align: left;transform: translate(115px, -6px);" aria-hidden="true"><img src="assets/martabus.png" style="height: 18px; display: inline; transform: translateY(5px);"/></span> </div> </div> <span class="eta-wrapper" style="padding-top: 2px; display: inline-block; font-size: 14px; margin-top:12px">Bus expected at <b>' +
(booking.displayEta || "No ETA yet") + '</b>,<br>' + (booking.delayInMinutesDescription || "") + '</span></div><div class="ready-time-gage" style="text-align: left"><div><b>Pick Up</b><Br>' + booking.pickupAddress + '<br><Br><b>Drop Off</b><br>' + booking.dropOffAddress +
'</div><br>' + '</div></div><br>';
});
htmlBuffer += "</div>";
document.querySelector('#mobility-eta').innerHTML += htmlBuffer;
}
function setMarker() {
var lateMins = bookings[0].delayInMinutes;
var markerDistance = ((lateMins * 4) - 5);
// to account for being very late.
if (markerDistance < 234) {
markerDistance += "px";
} else {
markerDistance = "234" + "px";
}
document.querySelector(".eta").style.transform = "translate(" + markerDistance + ", -10px)";
document.querySelector(".progress-wrapper").style.display = "inline-block";
//the last line is just a quick hack to only show this on the first trip.
//TODO: create proper templates for each trip category (Future, Past, Active, Cancelled)
}
</script>
</body>
</html>