qt-migration-legatus/qt5-before/dlbo/Lts/Tools/ArAssets/index.html

<!DOCTYPE html>
<html ng-app="main">
	<head>
		<meta charset="utf-8" />

		<!-- Leaflet Stylesheet -->
		<link rel="stylesheet" type="text/css" href="scripts/leaflet.css" />

		<!-- Wikitude, only in mobile app -->
		<script src="architect://architect.js" type="text/javascript"></script>

		<!-- Main Script (includes angular, leaflet and utm-latlng) -->
		<script src="scripts/main.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body ng-controller="ctrl">
		<div id="parentContainer" ng-hide="arMode">
			<!-- Contains everything, needed for css -->

			<div id="connectionConatiner" ng-hide="connected">
				<!-- Contains the connection menu, only shown in the beginning -->
				<h1>
					Connection
				</h1>
				<button
					ng-click="loadDataFromWS('ws://localhost:2080')"
					ng-disabled="disableInput"
					style="width: 100%"
				>
					Connect to localhost
				</button>
				<br class="bigBr" />
				OR
				<br class="bigBr" />
				<button
					ng-click="loadDataFromWS(websocketIp)"
					ng-disabled="disableInput"
				>
					Connect to
				</button>
				<input
					type="text"
					ng-model="websocketIp"
					placeholder="ws://192.168.133.140:2080"
					ng-disabled="disableInput"
				/>
				<br class="bigBr" />
				OR
				<br class="bigBr" />
				<button
					ng-click="loadDataFromCache()"
					ng-disabled="disableInput"
					style="width: 100%"
				>
					Load cached data
				</button>
				<hr />
				<label>
					{{ status }}
				</label>
				<progress
					ng-show="disableInput"
					max="6"
					value="0"
					id="progressBar"
				>
				</progress>
			</div>

			<div id="mapContainer">
				<!-- Contains the leaflet map, needed for css -->
				<div id="map">
					<!-- This is the actual map, see main.ts -->
				</div>
			</div>

			<div id="guiContainer" ng-hide="loading">
				<!-- Contains the selection menu,
					disabled when the websocket response is being processed -->

				<div ng-show="connected">
					<h1>
						Layers
					</h1>
					<table>
						<tr ng-repeat="layer in layers">
							<td>
								<input
									type="checkbox"
									ng-model="layer.Selected"
									ng-change="SelectionChanged()"
								/>
								{{ layer.Name }}
							</td>
							<!-- Creates table rows with a checkbox for every layer -->
						</tr>
					</table>

					<hr />

					<h1>
						Asset type
					</h1>
					<select
						ng-options="asset as asset.designation for asset in assets.availableAssets"
						ng-model="assets.selectedAsset"
						ng-change="SelectionChanged()"
					>
					</select>
					<!-- Creates a dropdown menu with all available asset types -->
					<hr />

					<h1>
						Selected mounting points:
						{{
							(
								mountingPoints
								| filter: MountingPointFilter(mountingPoint)
							).length
						}}
						<!-- Displays the amount of mounting points that
							fit the selected criteria -->
					</h1>
					<input
						type="text"
						ng-model="mpSearch"
						placeholder="Search... (case sensitive)"
					/>
					<!-- The table below will be filtered according to the entered text,
						see main.ts -->
					<button ng-click="mpSearch = ''">Clear</button>
					<!-- This just clears the text input above -->
					<br />
					<br />
					<div id="mp">
						<table
							ng-show="
							(
								mountingPoints
								| filter: MountingPointFilter(mountingPoint)
							).length > 0
						"
						>
							<!-- Enables the table if theres more than 0 selected mounting points -->
							<tr>
								<th>
									Name
								</th>
								<th>
									ID
								</th>
								<th>
									Position
								</th>
							</tr>
							<tr
								ng-repeat="mountingPoint in mountingPoints | filter: MountingPointFilter(mountingPoint)"
							>
								<!-- Creates table rows for each selected mounting point -->
								<td>
									{{
										mountingPoint.tag != ""
											? mountingPoint.tag
											: mountingPoint.designation
									}}
								</td>
								<!-- Displays mounting point tag if available,
									otherwise designation is displayed -->
								<td>
									{{ mountingPoint.id }}
								</td>
								<td>
									<button ng-click="ShowMp(mountingPoint)">
										Show
									</button>
									<!-- Opens the marker popup of the according mounting point,
										and centers the map on it, see main.ts -->
								</td>
							</tr>
						</table>
					</div>
					<hr />
				</div>
			</div>
		</div>
		<div ng-show="arMode" id="arCtrl">
			{{ arMountingPoint }}
			<br />
			<button onclick="window.Functions.BackFromAr()">
				Back
			</button>
		</div>
	</body>
</html>