/
estimate_calculator.html
105 lines (105 loc) · 4.75 KB
/
estimate_calculator.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="resources/css/estimator.css">
</head>
<body>
<div id='estimator'>
<div id='title'>
<h1> The Unofficial Trip Estimator for Ithaca Carshare</h1>
</div>
<form id='rates-form'>
<div id='receipt'>
<fieldset class='cost'>
<legend class='cost'>Estimated Cost</legend>
<ul>
<li> ${{toCashString(mileageCharges)}} mileage </li>
<li> ${{toCashString(timeCharges)}} time </li>
<li> ${{toCashString(standardFees)}} fees </li>
<li> ${{toCashString(taxes)}} taxes </li>
<hr>
<li><strong> Total: ${{toCashString(cost)}} </strong></li>
</ul>
<small><a href='http://ithacacarshare.org/rates/community'>Learn more</a>
about community pricing plans for Ithaca Carshare.
</small>
</fieldset>
</div>
<div id='forms'>
<fieldset>
<legend>Rate Information</legend>
<div>
<label for='pricing-plan'> Select your pricing plan:</label>
<p>
<select id='pricing-plan' required class='form-field' v-model='pricingPlanModifier'>
<option value='' disabled='true'>Select Plan</option>
<option v-for='(val, key) in plans' v-bind:value='val'>{{key}}</option>
</select>
</p>
<label for='vehicle-types'> Select your desired vehicle type: </label>
<p>
<select class='form-field' required id='vehicle-rates' v-model='vehicleRate'>
<option value='' disabled='true'>Select Vehicle Type</option>
<option value='30' selected>Car</option>
<option value='32'>Van</option>
<option value='40'>Truck</option>
</select>
</p>
</div>
</fieldset>
<fieldset>
<legend> Trip Information</legend>
<div>
<label for='miles-traveled'> Enter expected travel distance: </label>
<p>
<span>
<input class='form-field' id='miles-traveled' type='number' required min='0' step='.1' v-model='milesTraveled'>
<span> miles </span>
</span>
</p>
</div>
<label for='pickup-date'> Enter the reservation date and time: </label>
<p>
<input class='form-field date-field' type="date" id="pickup-date" v-model='pickupDate' required>
at
<span>
<select class='form-field time-field' name="pickup-hour" id="pickup-hour" v-model='pickupHour' required>
<option selected disabled value=''> Select Hour </option>
<option v-for='hr in hours' v-bind:value='hr'>{{hr}}</option>
</select>
<select class='form-field time-field' name='pickup-min' id='pickup-min' v-model='pickupMin'>
<option value='' disabled='true' selected> Select Min </option>
<option v-for='min in mins' v-bind:value='min'>{{min}}</option>
</select>
<select class='form-field time-field' name='pickup-meridian' id='pickup-meridian' v-model='pickupMeridian'>
<option value='' disabled='true' selected> Select AM/PM </option>
<option v-for='(val, key) in meridians' v-bind:value='val'>{{key}}</option>
</select>
</span>
</p>
<label for='trip-hours'>Enter the duration of the reservation: <label>
<p>
<span>
<input class='form-field time-field' type='number' id='trip-hours' min='0' step='1' v-model='tripHours'>
<span> hours </span>
<select class='form-field time-field' id='trip-mins' v-model='tripMins'>
<option v-for='min in mins' v-bind:value='min'>{{min}}</option>
</select>
<span> mins </span>
</span>
</p>
</fieldset>
</div>
</form>
<div id='signature'>
<small>Created by <a href='http://www.bethanywatson.me'>Beth Watson.</a>
You can <a href='http://www.github.com/bethanyvwatson/carshare-estimator'>peep the codes </a>on GitHub.
Beth is not affiliated with <a href="http://ithacacarshare.org">Ithaca Carshare</a>, but she loves their service!
</small>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="resources/javascript/vue_estimator.js"></script>
</body>
</html>