source: src/django_gheat/website/templates/home.html@ 9249

Last change on this file since 9249 was 9249, checked in by dennisw, 13 years ago

Working on a date filter using 'JQuery UI's datepicker.

File size: 3.0 KB
Line 
1<html>
2<head>
3 <link href="{{ STATIC_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
4 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}jquery-1.6.1.min.js"></script>
5<!--
6 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenLayers.js"></script>
7 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenStreetMap.js"></script>
8 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap.js"></script>
9-->
10 <script type="text/javascript" language="javascript" src="{{ STATIC_URL }}jquery.chained.js"></script>
11 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions.js"></script>
12 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}colorpicker.js"></script>
13
14<!-- jquery UI datapicker -->
15<link type="text/css" href="{{ STATIC_URL }}jquery-ui-1.8.13.custom.css" rel="Stylesheet" />
16<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.13.custom.min.js"></script>
17
18
19 <script language="javascript" type="text/javascript">
20 $(function(){
21 // enable colorpicker
22 $('#colour').colorPicker();
23 $('#start_date').datepicker();
24 $('#end_date').datepicker();
25
26 $('#menu_filter').click(function(){
27 $('#filter').slideToggle('fast');
28 $('#info').slideUp('fast');
29 });
30 $('#menu_info').click(function(){
31 $('#filter').slideUp('fast');
32 $('#info').slideToggle('fast');
33 });
34 });
35 </script>
36</head>
37<body onload="init()">
38 <div id="heatmap"></div>
39 <div id="container">
40 <div id="header">
41 Stichting Wireless Leiden - Heatmap
42 </div>
43 <div id="menu">
44 <a id="menu_info">Info</a>
45 <a id="menu_filter">Filters</a>
46 </div>
47 <div id="info">
48 This might need some work done.
49 </div>
50 <div id="filter">
51 <div id="filter_text">
52 <h1>Filters</h1>
53 <p>Create your custom layer by choosing the desired filter options on the right and adding it the layer to the list.</p>
54 <p>For instance, you can choose to create a layer with data measured only by yourself, or with a certain node from Wireless Leiden only.</p>
55 </div>
56 <div id="filter_list">
57 <form method="get" action="">
58 <input type="text" id="start_date" name="start_date" size="10"/> Start date<br />
59 <input type="text" id="end_date" name="end_date" size="10"/> End date<br />
60 <select id="select_user" style="width:104px"></select> User<br />
61 <select id="select_dataset" style="width:104px"></select> Dataset<br />
62 <select id="select_node" style="width:104px"></select> Node<br />
63 <input type="text" id="lname" name="lname" size="10"/> Layername<br /><br />
64 <input type="text" id="colour" name="colour"/> Colour<br /><br />
65 <input type="button" id="add_filter" value="Add filter"/>
66 </form>
67 </div>
68 </div>
69 </div>
70 <div id='node_list'>
71 Click on map to display Wireless Leiden nodes.
72 </div>
73</body>
74</html>
Note: See TracBrowser for help on using the repository browser.