index.ejs 8.09 KB
Newer Older
Porter Libby's avatar
Porter Libby committed
1
2
3
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
Porter Libby's avatar
Porter Libby committed
4
5
6
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Datavis 2.0</title>
Porter Libby's avatar
Porter Libby committed
7
        
Porter Libby's avatar
Porter Libby committed
8
        <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
Porter Libby's avatar
Porter Libby committed
9
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Porter Libby's avatar
Porter Libby committed
10
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
Porter Libby's avatar
Porter Libby committed
11
        <script src="https://js.arcgis.com/4.12/"></script>
Porter Libby's avatar
Porter Libby committed
12
13
14
        <script type="text/javascript" src="js/map.js"></script>
        <script type="text/javascript" src="js/data.js"></script>
        <script type="text/javascript" src="js/graph.js"></script>
Porter Libby's avatar
Porter Libby committed
15
        <script type="text/javascript" src="js/main.js"></script>
Porter Libby's avatar
Porter Libby committed
16
        <script type="text/javascript" src="js/util.js"></script>
Porter Libby's avatar
Porter Libby committed
17
        <link rel="stylesheet" type="text/css" href="css/main.css" />
Porter Libby's avatar
Porter Libby committed
18
19
20
        <link rel="stylesheet" type="text/css" href="css/graph.css" />
        <link rel="stylesheet" type="text/css" href="css/data.css" />
        <link rel="stylesheet" type="text/css" href="css/map.css" />
Porter Libby's avatar
Porter Libby committed
21
22
    </head>
    <body>
23
24
25
        <div id='loading'>
                <div style='float: left; width: 100%; height: 10px; text-align:center; padding-top:20%;color: black'>Rendering...</div><div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>
        </div>
26
27
28
        <div id='mapView'>
            <div id="viewDiv"></div>
            <div id='navcontrols'>
Porter Libby's avatar
Porter Libby committed
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
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-map'
                        class='nav-button-select nav-view-button' 
                        type="image" 
                        src="img/map-icon.png" 
                        alt="Submit" 
                        width="24" height="24">
                </div>
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-graph'
                        class='nav-button-idle nav-view-button'                    
                        onclick='switchToGraph()' 
                        type="image" 
                        src="img/graph-icon.png" 
                        alt="Submit" 
                        width="24" height="24">
                </div>
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-data'
                        class='nav-button-idle nav-view-button'
                        onclick='switchToData()' 
                        id='data'
                        type="image" 
                        src="img/data-icon.png" 
                        alt="Submit" 
                        width="48" height="48">
                </div>
62
            </div>
Porter Libby's avatar
Porter Libby committed
63
        </div>
64
65
66

        <div id='graphView'>
            <div id='graph'>
Porter Libby's avatar
Porter Libby committed
67
                <canvas id="line-chart"></canvas>
68
69
            </div>
            <div id='navcontrols'>
Porter Libby's avatar
Porter Libby committed
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
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-map'
                        class='nav-button-idle nav-view-button'
                        onclick='switchToMap()' 
                        type="image" 
                        src="img/map-icon.png" 
                        alt="Submit" 
                        width="24" height="24">
                </div>
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-graph'
                        class='nav-button-select nav-view-button'
                        type="image" 
                        src="img/graph-icon.png" 
                        alt="Submit" 
                        width="24" height="24">
                </div>
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-data'
                        class='nav-button-idle nav-view-button'
                        onclick='switchToData()'
                        id='data' 
                        type="image" 
                        src="img/data-icon.png" 
                        alt="Submit" 
                        width="48" height="48">
                </div>
103
            </div>
Porter Libby's avatar
Porter Libby committed
104
        </div>
105
106

        <div id='dataView'>
Porter Libby's avatar
Porter Libby committed
107
            <div id='data'>
108
                <div class='data-catagory' id='query_type'>
Porter Libby's avatar
Porter Libby committed
109
                    <div class='data-header' style='padding-bottom:15px;''>
110
                        <input class="data-radio form-radio" onchange="setReading();" type="radio" name="data-type" id="readings"/>
Porter Libby's avatar
Porter Libby committed
111
                        <label for="readings"><strong>Readings</strong></label>
Porter Libby's avatar
Porter Libby committed
112

113
                        <input class="data-radio form-radio" onchange="setStreaming();" type="radio" name="data-type" id="streamings"/>
Porter Libby's avatar
Porter Libby committed
114
                        <label for="streamings"><strong>Stream Data</strong></label>
Porter Libby's avatar
Porter Libby committed
115
116
                    </div>
                </div>
Porter Libby's avatar
Porter Libby committed
117
118
119
                <div class='data-catagory' id='trips'></div>
                <div class='data-catagory' id='sites'></div>
                <div class='data-catagory' id='sectors'></div>
Porter Libby's avatar
Porter Libby committed
120
                <div class='data-catagory' id='spots'></div>
121
122
                <div class='data-catagory' id='streamingplatform'></div>
                <div class='data-catagory' id='streamingdates'></div>
Porter Libby's avatar
Porter Libby committed
123
                <div class='data-catagory' id='streaming'></div>
124
                <div class='data-catagory' id='reading'></div>
Porter Libby's avatar
Porter Libby committed
125
                <div id='data-prompt-box'>
Porter Libby's avatar
Porter Libby committed
126
127
128
129
130
131
132
133
            
                    <div id='text'>
                        <strong id='prompt-text'>
                            <span id='data-prompt'>Select a data type</span>
                        </strong>
                    </div>

                    <div id='buttons'>
Porter Libby's avatar
Porter Libby committed
134
135
136
137
138
139
140
                        <input 
                            id='button_permalink'
                            onclick='buildQuery()' 
                            type="image" 
                            src="img/link-icon.png" 
                            alt="Submit" 
                            width="32" height="32">
141
                        <span id='permalink_out' style='color: white;font-size: 14px;'></span>
Porter Libby's avatar
Porter Libby committed
142
143
                    </div>

Porter Libby's avatar
Porter Libby committed
144
                </div>
Porter Libby's avatar
Porter Libby committed
145
146
            </div>
            <div id='navcontrols'>
Porter Libby's avatar
Porter Libby committed
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
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-map'
                        class='nav-button-idle nav-view-button' 
                        onclick='switchToMap()' 
                        type="image" 
                        src="img/map-icon.png" 
                        alt="Submit" 
                        width="24" height="24">
                </div>
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-graph'
                        class='nav-button-idle nav-view-button'
                        onclick='switchToGraph()' 
                        type="image" 
                        src="img/graph-icon.png" 
                        alt="Submit" 
                        width="24" height="24">
                </div>
                <div class='tooltip'>
                    <span class="tooltiptext">Tooltip text</span>
                    <input 
                        id='nav-button-data'
                        class='nav-button-select nav-view-button' 
                        type="image" 
                        id='data'
                        src="img/data-icon.png" 
                        alt="Submit" 
                        width="48" height="48">
                </div>
180
            </div>
Porter Libby's avatar
Porter Libby committed
181
        </div>
182
        <script>
Porter Libby's avatar
Porter Libby committed
183
            ready();
184
        </script>
Porter Libby's avatar
Porter Libby committed
185
    </body>
Porter Libby's avatar
bug    
Porter Libby committed
186
</html>