-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
241 lines (226 loc) · 11.9 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Finder</title>
<!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href='https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<link rel="stylesheet" href="semantic/semantic-ui-calendar/dist/calendar.min.css" />
<link rel="stylesheet" type="text/css" href="css/custom-styles.css">
<!-- JavaScripts -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js'></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script src="semantic/semantic-ui-calendar/dist/calendar.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div class="ui segments">
<!-- <div class="ui inverted segment" id="header">
Find Your Home
</div> -->
<div class="ui stackable streched grid">
<div class="seven wide column" style="left-padding: 0 !important;">
<div class="ui segments" id="data-container">
<div class="ui sticky segment" id="data-menu">
<div class="ui stackable labeled icon secondary menu">
<div class="header item">
What do you want to know?
<h5>Select the level of data <i class="small right arrow icon"></i> </h5>
</div>
<div class="right menu">
<div class="ui data basic button" v-bind:class=buttonsList[0].state v-on:click="activateButton(buttonsList[0])">
<i v-bind:class=buttonsList[0].icon></i> {{ buttonsList[0].text }}
</div>
<div class="ui data basic button" v-bind:class=buttonsList[1].state v-on:click="activateButton(buttonsList[1])">
<i v-bind:class=buttonsList[1].icon></i> {{ buttonsList[1].text }}
</div>
<div class="ui data basic button" v-bind:class=buttonsList[2].state v-on:click="activateButton(buttonsList[2])">
<i v-bind:class=buttonsList[2].icon></i> {{ buttonsList[2].text }}
</div>
<div class="ui inverted red icon button" v-bind:class=buttonsList[3].state v-on:click="activateButton(buttonsList[3])">
<i v-bind:class=buttonsList[3].icon></i>
</div>
<div class="ui inverted green icon button" v-bind:class=buttonsList[4].state v-on:click="activateButton(buttonsList[4])">
<i v-bind:class=buttonsList[4].icon></i>
</div>
</div>
</div>
</div>
<div class="ui segment" style="padding: 30px;">
<div v-show="content === 'places'">
<!-- <select name="Community Area" multiple="" class="ui dropdown">
<option value=""><i class="male icon"></i>Community Area</option>
<option value="austin">Austin</option>
<option value="albany park">Albany Park</option>
</select> -->
<div class="ui two link cards">
<data-item v-for="item in placesList" v-bind:data="item"></data-item>
</div>
</div>
<div v-show="content === 'details'">
<div v-if="!selectedPlace">
Please select an apartment to see details
</div>
<div v-else>
<h2 class="ui header"> {{ selectedPlace.name }}
<div class="ui right floated primary button" v-on:click="showVisitWindow()">
<i class="marker icon"></i> Visit
</div>
</h2><br>
<div class="ui relaxed grid">
<div class="nine wide column">
<img class="ui fluid rounded image" v-bind:src=selectedPlace.imageURL>
</div>
<div class="seven wide column">
<!-- <h4>Description</h4> -->
<p>{{ selectedPlace.description }}</p>
</div>
</div><br>
<table class="ui definition table">
<tbody>
<tr> <td class="four wide column">Address</td> <td>{{ selectedPlace.address }}</td> </tr>
<tr> <td>Company</td> <td>{{ selectedPlace.company }}</td> </tr>
<tr> <td>Phone</td> <td>{{ selectedPlace.phone }}</td> </tr>
<tr> <td>Type of Property</td> <td>{{ selectedPlace.type }}</td> </tr>
<tr> <td>Community Area</td> <td>{{ selectedPlace.area }}</td> </tr>
<tr class="warning">
<td>
Price
<i class="info circle icon" title="Zestimate price from Zillow API">
</td>
<td>{{ selectedPlace.price }}</td>
</tr>
</tbody>
</table><br>
<!-- <img class="ui right floated image" src="http://www.zillow.com/widgets/GetVersionedResource.htm?path=/static/logos/Zillowlogo_200x50.gif" width="200" height="50" alt="Zillow Real Estate Search"> -->
<br>
</div>
</div>
<div v-show="content === 'statistics'">
<div v-if="!selectedPlace">
Please select an apartment to see statistics
</div>
<div v-else>
<div class="ui attached message">
<div class="header">Travel times <i class="info circle icon" title="Aproximated travel time from the university to this apartment"></i></div>
</div>
<div class="ui attached fluid segment">
<div class="ui relaxed two column grid">
<travel-data-item v-for="item in selectedPlace.travelData" v-bind:data="item"></travel-data>
</div>
</div>
<div class="ui attached message">
<div class="header">Ratings <i class="info circle icon" title="Price, distance and security ratings"></i></div>
</div>
<div class="ui attached segment">
<div class="ui three statistics">
<div class="red statistic">
<div class="value"> 22</div>
<div class="label"><i class="protect icon"></i> Security </div>
</div>
<div class="green statistic">
<div class="value"> 22</div>
<div class="label"><i class="dollar icon"></i> Price </div>
</div>
<div class="yellow statistic">
<div class="value"> {{ selectedPlace.ratings[0] }}</div>
<div class="label"><i class="road icon"></i> Distance ({{selectedPlace.distance}}) </div>
</div>
</div>
</div>
<div id="chart"></div>
</div>
</div>
<div v-show="content === 'wish'">
Wish List
</div>
<div v-show="content === 'lucky'">
I feel lucky section
</div>
</div>
</div>
</div>
<div class="nine wide column" style="right-padding: 0;">
<div class="ui sticky segments" id="map-container">
<div class="ui segment" id="map-menu">
<div class="ui stackable labeled icon secondary menu">
<div class="header item">
Compare the Area
<h5>Select the map type <i class="small right arrow icon"></i> </h5>
</div>
<div class="right menu">
<div class="ui map inverted red button" id="security-btn">
<i class="protect icon"></i> Security
</div>
<div class="ui map inverted green button" id="price-btn">
<i class="dollar icon"></i> Price
</div>
<div class="ui map inverted yellow button" id="distance-btn">
<i class="road icon"></i> Distance
</div>
</div>
</div>
</div>
<div class="ui segment" id="map"></div>
</div>
</div>
</div>
</div>
<div class="ui small modal" id="welcome_modal">
<i class="close icon"></i>
<div class="header">
<h2 style="display: inline">Welcome to your Home Finder!</h2>
<p style="font-size: 1em; font-weight: lighter;">Let's find the perfect home for you</p>
</div>
<div class="image content">
<div class="ui medium image">
<img src="logo.png">
</div>
<div class="description">
<div class="ui header"></div>
<p><h4 style="display: inline">1. Select a map type:</h4>
Security heatmap, price by sector or distance radios (every 3 Km from University of Illinois at Chicago)</p>
<p><h4 style="display: inline">2. Select an apartment</h4></p>
<p><h4 style="display: inline">3. Analyze:</h4> View details and see statistics. Compare apartments and decide</p>
<p><h4 style="display: inline">4. Visit the place: </h4>Plan your travel. See the weather forecast and how to get to the apartment you want</p>
</div>
</div>
<div class="content">
<div class="ui blue compact message">
If you want to see the recomended places with the best security, price and distance ratings, click the star button <i class="small star green icon"></i>.
If you want to save your favorite apartments, click the heart button <i class="small heart red icon"></i>
</div>
</div>
</div>
<div class="ui modal" id="modal">
<i class="close icon"></i>
<div class="content">
<div class="ui relaxed divided grid">
<div class="six wide column">
<h2 style="display: inline">When do you want to go?</h2>
<p style="font-size: 1.15em;">Select a date to see the weather forecast</p>
<weather-forecast v-for="item in selectedDayWeather(weatherList)" v-bind:day="item"></weather-forecast>
<div class="ui calendar" id="calendar"></div>
<h3 style="display:none">{{ selectedDateString() }}</h3>
</div>
<div class="ten wide column">
<h2 style="display: inline; margin-bottom: 10px;">How to get to {{ destinationName }}?</h2>
<p style="font-size: 1.15em;">Enter an origin location and then the destination as <b>{{ destination }}</b> to see the directions</p>
<iframe src="directions-map.html" height="350" width="100%" style="border:none;"></iframe>
</div>
</div>
</div>
</div>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyDip7CRroRr9Aui972KlJZ2MKr7P-U20PA&libraries=places,visualization"></script>
<script src="js/map.js"></script>
<script src="js/data.js"></script>
<script src="js/modal.js"></script>
<script src="js/script.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</body>
</html>