-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (119 loc) · 7.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0 maximum-scale=1.0"/>
<!-- ICON -->
<link rel="icon" href="./assets/favicon.ico" sizes="32x32" type="image/vnd.microsoft.icon">
<!-- TITLE -->
<title class="application-title"></title>
<!-- META -->
<!--<meta property="og:title" content="">-->
<!--<meta property="og:description" content="">-->
<!--<meta property="og:url" content="">-->
<!--<meta property="og:image" content="">-->
<!-- CHARTJS -- https://www.chartjs.org/ -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>-->
<!-- CALCITE -->
<script type="module" src="https://js.arcgis.com/calcite-components/2.12.0/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.12.0/calcite.css"/>
<!-- ArcGIS API for JavaScript-->
<link href="https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css" rel="stylesheet"/>
<script src="https://js.arcgis.com/4.30/"></script>
<!-- APPLICATION -->
<link rel="stylesheet" type="text/css" href="./css/application.css">
<script type="module" src="./js/Application.js"></script>
</head>
<body class="calcite-mode-light">
<calcite-shell>
<!-- HEADER -->
<calcite-navigation slot="header">
<!-- TITLE AND SNIPPET -->
<calcite-navigation-logo slot="logo" icon="360-view" heading="Application Title" description="application description"></calcite-navigation-logo>
<!-- SHARE AND INFO ACTIONS -->
<!--<calcite-action slot="content-end" id="app-share-action" appearance="transparent" scale="m" title="share current options..." text="share current options" icon="link"></calcite-action>-->
<calcite-action slot="content-end" id="app-details-action" appearance="transparent" scale="m" title="app details..." text="app details" icon="information"></calcite-action>
<!-- SIGN IN-->
<div id="sign-in-container" slot="user"></div>
</calcite-navigation>
<!-- LEFT -->
<calcite-shell-panel slot="panel-start" position="start" width-scale="s">
<calcite-action-bar id="side-panel-action-bar" slot="action-bar">
<calcite-action text="Buildings" title="building models" icon="locator" class="toggle-action" data-toggle="models" active></calcite-action>
<calcite-action text="Viewsheds" title="create viewshed" icon="viewshed" class="toggle-action" data-toggle="viewshed"></calcite-action>
<calcite-action-group slot="actions-end">
<calcite-action text="Map" title="map" icon="map" class="toggle-action" data-toggle="map"></calcite-action>
<calcite-action text="Places" title="places" icon="bookmark" class="toggle-action" data-toggle="places" hidden></calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-panel heading="Proposed Building" class="toggle-panel" data-toggle="models">
<calcite-action slot="header-actions-end" icon="select-visible" title="select active" hidden></calcite-action>
<calcite-panel>
<calcite-card-group id="models-list" selection-mode="single-persist"></calcite-card-group>
</calcite-panel>
<div slot="footer">
Building models from <a href="https://www.kenney.nl/assets/" target="_blank">Kenney game assets</a> under <a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank">CC0 1.0 Universal</a>.
</div>
</calcite-panel>
<calcite-panel heading="Viewsheds" class="toggle-panel" data-toggle="viewshed" hidden>
<calcite-label layout="inline" style="margin:8px;--calcite-label-margin-bottom:0;">
<calcite-button id="viewshed-add-btn" icon-start="map-pin" appearance="outline-fill" style="width:100%;">set map location</calcite-button>
<!--<calcite-button id="viewshed-clear-btn" icon-end="trash" appearance="outline-fill" disabled></calcite-button>-->
</calcite-label>
<calcite-list id="viewsheds-list" selection-mode="single-persist" selection-appearance="border"></calcite-list>
</calcite-panel>
<calcite-panel heading="Map" class="toggle-panel" data-toggle="map" hidden>
<calcite-button id="map-action" target="_blank" slot="header-actions-end" appearance="transparent" icon-end="launch" title="view map item..."></calcite-button>
<calcite-block heading="Layers" collapsible open>
<calcite-icon slot="icon" icon="layers"></calcite-icon>
<div id="layers-container"></div>
</calcite-block>
<calcite-block heading="Legend" collapsible open>
<calcite-icon slot="icon" icon="legend"></calcite-icon>
<div id="legend-container"></div>
</calcite-block>
</calcite-panel>
<calcite-panel id="places-panel" heading="Places" class="toggle-panel" data-toggle="places" hidden>
<div id="places-container"></div>
</calcite-panel>
</calcite-shell-panel>
<!-- CENTER -->
<calcite-panel id="center-container">
<div id="view-container"></div>
</calcite-panel>
<!-- RIGHT -->
<calcite-shell-panel slot="panel-end" position="end" width-scale="l">
<calcite-panel heading="Proposed View">
<div id="proposed-view-container" class="view-container"></div>
</calcite-panel>
<calcite-panel heading="Existing View">
<div id="existing-view-container" class="view-container"></div>
</calcite-panel>
</calcite-shell-panel>
<!-- SHAREABLE ALERT -->
<calcite-alert id="app-share-alert" slot="alerts" kind="success" icon="launch" placement="bottom" auto-close auto-close-duration="medium">
<div slot="message">Shareable link has been copied to the clipboard.</div>
<calcite-link slot="link" href="#" target="_blank" role="link" title="open in new tab">open in new tab</calcite-link>
</calcite-alert>
<!-- NOTICES ADN ALERTS -->
<calcite-alert id="app-notice" slot="alerts" kind="danger" placement="bottom" width="auto">
<div slot="title"></div>
<div slot="message"></div>
</calcite-alert>
<!-- APP DETAILS MODAL -->
<calcite-modal id="app-details-modal" slot="modals" kind="brand" scale="m" width="m" aria-labelledby="app-modal-title">
<h3 slot="header" id="app-modal-title" class="application-title"></h3>
<div slot="content" class="application-description"></div>
<div slot="secondary">
<calcite-label layout="inline">
<span>hide on startup</span>
<calcite-checkbox id="hide-startup-checkbox"></calcite-checkbox>
</calcite-label>
</div>
<calcite-button id="app-details-ok-btn" slot="primary" width="full" hidden>OK</calcite-button>
</calcite-modal>
</calcite-shell>
<!-- LOADER -->
<calcite-loader id="app-loader" type="indeterminate" scale="l" text="...loading..."></calcite-loader>
</body>
</html>