/
index.html
123 lines (108 loc) · 4.15 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<head>
<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Varela|Abril+Fatface' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Top Pot Donuts Demand Simulation Table</title>
</head>
<body>
<header>
<img class="logo" src="images/logo.jpg" />
<h1 id='header'>Top Pot Doughnuts<br />
<span class="subheader">Demand Simulation</span><span id="partytime"></span></h1>
</header>
<main>
<div class="container">
<div class='leftside'>
<h3 class="chartheader">Doughnut Demand<br /><span class="subheader">Bar Graph</span></h3>
<!-- Chart here -->
<canvas id='myChart' class='leftmenu' height='400' width='400'></canvas>
</div>
<div class="rightside">
<div class="description">
<p>This table details simulated demand at each of Top Pot's five Seattle locations. The number of customers per hour is randomized, and takes into consideration each location's minimum and maximum number of customers per hour. Then, that number is multiplied by the average number of doughnuts purchased by individual customers at the particular location. The totals at the end of each table row represent the total number of donuts sold in a given day at each location.</p>
</div>
<table>
<thead>
<tr>
<th>Top Pot Location</th>
<th>7:00 AM</th>
<th>8:00 AM</th>
<th>9:00 AM</th>
<th>10:00 AM</th>
<th>11:00 AM</th>
<th>12:00 PM</th>
<th>1:00 PM</th>
<th>2:00 PM</th>
<th>3:00 PM</th>
<th>4:00 PM</th>
<th>5:00 PM</th>
<th>6:00 PM</th>
<th>7:00 PM</th>
<th>Total Donuts Sold</th>
</tr>
</thead>
<tbody id='donutShop'>
<!-- script.js will append tr, td here -->
</tbody>
</table>
<hr id="party" />
<br />
<!--Form data for entering additional locations-->
<form id="userInput">
<fieldset>
<legend>Add New Location or Modify Existing Location</legend>
<label for="existingLocation">Existing Location:</label>
<select name="existingLocation" id="existingLocation">
<option value="selectLocation">--- Make a Selection: ---</option>
</select>
<label for="newLocation">OR New Location:</label>
<input type="text" class="location" name="location" />
<br />
<label for="minCustomers">Minimum Customers Per Hour:</label>
<input type="text" name="minCustomersPh" id="minCustomersPh" />
<label for="maxCustomers">Maximum Customers Per Hour:</label>
<input type="text" name="maxCustomersPh" id="maxCustomersPh" />
<br />
<label for="avgDonuts">Average Donuts Sold Per Customer:</label>
<input type="text" name="averageDonutsPc" id="averageDonutsPc" />
<input type="submit" value="Submit" />
</fieldset>
</form>
</div>
</div>
</main>
<footer>
<p>Page by Cortney Lane 2015</p>
</footer>
<!-- JAVASCRIPT STUFF -->
<script src="script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js'>
</script>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: allLocations.map(function(loc) {
return loc.location;
}),
datasets: [
{
label: "Shops",
// fillColor: "rgba(220,220,220,0.5)",
fillColor: "#A8AD80",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: allLocations.map(function(loc) {
// alert(loc.dailyTotal);
return loc.dailyTotal;
})
}
]
};
var myBarChart = new Chart(ctx).Bar(data, {
barShowStroke: false
});
</script>
</body>