nilix/onyx
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refine UI

Browse source
This commit is contained in:
Iris Lightshard 2022-08-13 22:18:00 -06:00
parent d60cf73184
commit c0a33feb7c
Signed by: Iris Lightshard
GPG key ID: 3B7FBC22144E6398
10 changed files with 411 additions and 314 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
site/index.html
View file

@ -9,7 +9,12 @@
<title>ONYX - Scry/Pendulum</title> <title>ONYX - Scry/Pendulum</title>
</head> </head>
<body> <body>
<noscript>
<div id="noscript-container">
<p>This is a javascript application - <a href="https://nilfm.cc/git/onyx-scry">ONYX/scry</a>;</p>
<p>You must enable javascript in your browser to use it.</p>
</div>
</noscript>
<div id="map"></div> <div id="map"></div>
<div id="mapControls"> <div id="mapControls">
@ -17,45 +22,70 @@
<button id="addCircle-btn">&compfn;</button> <button id="addCircle-btn">&compfn;</button>
<button id="addPolygon-btn">&diamond;</button> <button id="addPolygon-btn">&diamond;</button>
<div id="subControls"> <div id="subControls">
<button id="save-btn"><3</button> <button id="save-btn">&darr;</button>
<button id="tiles-btn">&larr;&rarr;</button> <button id="tiles-btn">&Colon;</button>
<button id="clear-btn">XXX</button> <button id="clear-btn">&olarr;</button>
<button id="menu-btn">&equiv;</button> <button id="menu-btn">&equiv;</button>
</div> </div>
</div> </div>
<div id="modal-container"> <div id="createOverlay-container">
<button class="closeBtn" id="modalCloseBtn">x</button> <div class="modalHeader">
<h2 id="modal-title"></h2> <button class="closeBtn" id="createOverlay-closeBtn">x</button>
<div id="modal-content"> <h2 id="createOverlay-title"></h2>
</div>
<div id="createOverlay-content">
<label for="createOverlay-name">Name</label><br/>
<input type="text" id="createOverlay-name"><br/>
<label for="createOverlay-desc">Description</label><br/>
<textarea id="createOverlay-desc"></textarea><br/>
<div id="radius-container">
<label for="createOverlay-radius">Radius (meters)</label><br/>
<input type="number" step="1" id="createOverlay-radius" value="500"><br/>
</div>
<button id="createOverlay-submitBtn">OK</button>
</div> </div>
</div> </div>
<div id="cancel-container"> <div id="cancel-container">
<button class="cancel-btn">Cancel</button> <button class="negative-btn" id="cancel-btn">Cancel</button>
</div>
<div id="info-container">
<button class="closeBtn" id="info-closeBtn">x</button>
<div class="info-content>
</div>
</div> </div>
<div id="confirm-container"> <div id="confirm-container">
<span id="confirm-msg"></span> <span id="confirm-msg"></span>
<button id="yes-btn">Yes</button> <div class="multiBtn-container">
<button id="no-btn">No</button> <button class="positive-btn" id="yes-btn">Yes</button>
<button class="negative-btn" id="no-btn">No</button>
</div>
</div> </div>
<div id="import-export-container"> <div id="import-export-container">
<h2></h2> <h2></h2>
<textarea id="import-export-textarea"></textarea> <textarea id="import-export-textarea"></textarea>
<button id="import-export-ok-btn">OK</button> <div class="multiBtn-container">
<button id="import-export-cancel-btn">Cancel</button> <button id="import-export-ok-btn">OK</button>
<button id="import-export-cancel-btn">Cancel</button>
</div>
</div> </div>
<div id="overlays-menu-container"> <div id="overlays-menu-container">
<button class="closeBtn" id="overlys-closeBtn">x</button>
<details id="markers-wrapper"><summary>Markers</summary><ul id="markers-list"></ul></details> <details id="markers-wrapper"><summary>Markers</summary><ul id="markers-list"></ul></details>
<details id="circles-wrapper"><summary>Circles</summary><ul id="circles-list"></ul></details> <details id="circles-wrapper"><summary>Circles</summary><ul id="circles-list"></ul></details>
<details id="polygons-wrapper"><summary>Polygons</summary><ul id="polygons-list"></ul></details> <details id="polygons-wrapper"><summary>Polygons</summary><ul id="polygons-list"></ul></details>
<button id="import-btn">Import</button> <div class="multiBtn-container">
<button id="export-all-btn">Export All</button> <button id="import-btn">Import</button>
<button id="export-all-btn">Export All</button>
</div>
</div> </div>
<!--</div>-->
</body> </body>
<link rel='stylesheet' type="text/css" href="/static/leaflet.css"> <link rel='stylesheet' type="text/css" href="/static/leaflet.css">
<script src="/static/leaflet.js"></script> <script src="/static/leaflet.js"></script>

6
src/.srcmap
View file

@ -1,5 +1,5 @@
10-overlay.ts 147 10-overlay.ts 147
11-tilelayer.ts 37 11-tilelayer.ts 37
20-modal.ts 112 20-createOverlayModal.ts 96
30-handlers.ts 2 30-handlers.ts 11
99-onyx-scry.ts 103 99-onyx-scry.ts 125

97
src/20-createOverlayModal.ts Normal file
View file

@ -0,0 +1,97 @@
class CreateOverlayModal {
constructor() {
const _this = this;
const closeBtn = document.getElementById("createOverlay-closeBtn");
if (closeBtn) {
closeBtn.onclick = ()=>{_this.setVisible(false)};
}
}
self(): HTMLElement | null {
return document.getElementById("createOverlay-container");
}
title(): HTMLElement | null{
return document.getElementById("createOverlay-title");
}
content(): HTMLElement | null {
return document.getElementById("createOverlay-content");
}
submitBtn(): HTMLElement | null {
return document.getElementById("createOverlay-submitBtn");
}
radiusContainer(): HTMLElement | null {
return document.getElementById("radius-container");
}
nameField(): string {
return (document.getElementById("createOverlay-name") as HTMLInputElement)?.value ?? "";
}
descField(): string {
return (document.getElementById("createOverlay-desc") as HTMLInputElement)?.value ?? "";
}
radiusField(): string {
return (document.getElementById("createOverlay-radius") as HTMLInputElement)?.value ?? "";
}
visible(): boolean {
return this.self()?.style.display != "none";
}
setVisible(v: boolean): void {
const modal = this.self();
if (modal) {
modal.style.display = v ? "block" : "none";
}
}
setState(state: OverlayType, args: any): void {
const _this = this;
const title = this.title()
const radiusContainer = _this.radiusContainer();
const radius = _this.radiusField();
const name = _this.nameField();
const desc = _this.descField();
const submitBtn = _this.submitBtn();
switch (state) {
case OverlayType.POINT:
if (title) {
title.innerHTML = "Add Marker";
}
if (submitBtn) {
submitBtn.onclick = () => {
const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
point.add(args.map);
args.overlays.markers.push(point);
_this.setVisible(false);
}
}
break;
case OverlayType.CIRCLE:
if (title) {
title.innerHTML = "Add Circle";
}
if (radiusContainer) {
radiusContainer.style.display = "block";
}
if (submitBtn) {
submitBtn.onclick = () => {
const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500});
circle.add(args.map);
args.overlays.circles.push(circle);
_this.setVisible(false);
}
}
break;
case OverlayType.POLYGON:
break;
}
}
}

113
src/20-modal.ts
View file

@ -1,113 +0,0 @@
class Modal {
constructor() {
const _this = this;
const closeBtn = document.getElementById("modalCloseBtn");
if (closeBtn) {
closeBtn.onclick = ()=>{_this.setVisible(false)};
}
}
self(): HTMLElement | null {
return document.getElementById("modal-container");
}
title(): HTMLElement | null{
return document.getElementById("modal-title");
}
content(): HTMLElement | null {
return document.getElementById("modal-content");
}
submitBtn(): HTMLElement | null {
return document.getElementById("modal-submitBtn");
}
radiusContainer(): HTMLElement | null {
return document.getElementById("radius-container");
}
nameField(): string {
return (document.getElementById("modal-name") as HTMLInputElement)?.value ?? "";
}
descField(): string {
return (document.getElementById("modal-desc") as HTMLInputElement)?.value ?? "";
}
radiusField(): string {
return (document.getElementById("modal-radius") as HTMLInputElement)?.value ?? "";
}
visible(): boolean {
return this.self()?.style.display != "none";
}
setVisible(v: boolean): void {
const modal = this.self();
if (modal) {
modal.style.display = v ? "block" : "none";
}
}
setState(state: OverlayType, args: any): void {
const _this = this;
const title = this.title()
switch (state) {
case OverlayType.POINT:
if (title) {
title.innerHTML = "Add Marker";
}
fetch("/static/pointModal.html")
.then(r=>r.text())
.then(t=> {
const content = _this.content();
if (content) { content.innerHTML = t; }
const submitBtn = _this.submitBtn();
if (submitBtn) {
submitBtn.onclick = () => {
const name = _this.nameField();
const desc = _this.descField();
const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
point.add(args.map);
args.overlays.markers.push(point);
_this.setVisible(false);
}
}
});
break;
case OverlayType.CIRCLE:
if (title) {
title.innerHTML = "Add Circle";
}
fetch("/static/pointModal.html")
.then(r=>r.text())
.then(t=> {
const content = _this.content();
if (content) { content.innerHTML = t; }
const radiusContainer = _this.radiusContainer();
if (radiusContainer) {
radiusContainer.style.display = "block";
}
const submitBtn = _this.submitBtn();
if (submitBtn) {
submitBtn.onclick = () => {
const name = _this.nameField();
const desc = _this.descField();
const radius = _this.radiusField();
const circle = new Circle(name, desc, args.latlng, {radius: Number(radius)});
circle.add(args.map);
args.overlays.circles.push(circle);
_this.setVisible(false);
}
}
});
break;
case OverlayType.POLYGON:
break;
}
}
}

11
src/30-handlers.ts
View file

@ -1,3 +1,12 @@
class MapHandlers { class MapHandler {
map: L.Map;
overlays: OverlayState;
layers: TileLayerWrapper[];
constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[]) {
this.map = map;
this.overlays = overlays;
this.layers = layers;
}
} }

40
src/99-onyx-scry.ts
View file

@ -9,7 +9,7 @@ function init(): void {
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ {
maxZoom: 19, maxZoom: 19,
attribution: '© OpenStreetMap' attribution: "street map tiles &copy; OpenStreetMap"
})); }));
const satelliteLayer = TileLayerWrapper.constructLayer( const satelliteLayer = TileLayerWrapper.constructLayer(
@ -18,7 +18,7 @@ function init(): void {
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{ {
maxZoom: 19, maxZoom: 19,
attribution: "&copy; Esri" attribution: "satellite tiles &copy; Esri"
})); }));
TileLayerWrapper.enableOnly(streetLayer, map); TileLayerWrapper.enableOnly(streetLayer, map);
@ -27,41 +27,56 @@ function init(): void {
overlays.circles.forEach(m=>m.add(map)); overlays.circles.forEach(m=>m.add(map));
overlays.polygons.forEach(m=>m.add(map)); overlays.polygons.forEach(m=>m.add(map));
const modal = new Modal(); const createOverlayModal = new CreateOverlayModal();
const closeAllModals = (): void => {
createOverlayModal.setVisible(false);
}
const resetMapClick = (): void => { const resetMapClick = (): void => {
try { try {
const addPointBtn = document.getElementById("addPoint-btn");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler); map.off("click", addMarkerHandler);
} catch {} } catch {}
try { try {
const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.classList.remove("activeBtn");
}
map.off("click", addCircleHandler); map.off("click", addCircleHandler);
} catch {} } catch {}
} }
const addMarkerHandler = (e: any): void => { const addMarkerHandler = (e: any): void => {
modal.setVisible(true); createOverlayModal.setVisible(true);
modal.setState(OverlayType.POINT, { createOverlayModal.setState(OverlayType.POINT, {
latlng: e.latlng, latlng: e.latlng,
map: map, map: map,
overlays: overlays, overlays: overlays,
}); });
map.off("click", addMarkerHandler); resetMapClick();
} }
const addCircleHandler = (e: any): void => { const addCircleHandler = (e: any): void => {
modal.setVisible(true); createOverlayModal.setVisible(true);
modal.setState(OverlayType.CIRCLE, { createOverlayModal.setState(OverlayType.CIRCLE, {
latlng: e.latlng, latlng: e.latlng,
map: map, map: map,
overlays: overlays, overlays: overlays,
}); });
map.off("click", addCircleHandler); resetMapClick();
} }
const addMarkerBtn = document.getElementById("addPoint-btn"); const addMarkerBtn = document.getElementById("addPoint-btn");
if (addMarkerBtn) { if (addMarkerBtn) {
addMarkerBtn.onclick = (e: any): void => { addMarkerBtn.onclick = (e: any): void => {
closeAllModals();
resetMapClick() resetMapClick()
addMarkerBtn.classList.add("activeBtn");
map.on("click", addMarkerHandler); map.on("click", addMarkerHandler);
}; };
} }
@ -69,7 +84,9 @@ function init(): void {
const addCircleBtn = document.getElementById("addCircle-btn"); const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) { if (addCircleBtn) {
addCircleBtn.onclick = (e: any): void => { addCircleBtn.onclick = (e: any): void => {
closeAllModals();
resetMapClick(); resetMapClick();
addCircleBtn.classList.add("activeBtn");
map.on("click", addCircleHandler); map.on("click", addCircleHandler);
} }
} }
@ -98,6 +115,11 @@ function init(): void {
} }
}; };
} }
const main = document.getElementById("app-container");
if (main) {
main.style.display = "initial";
}
} }
init(); init();

135
src/onyx-scry.ts
View file

@ -182,30 +182,30 @@ class OverlayState {
} }
} }
} }
}class Modal { }class CreateOverlayModal {
constructor() { constructor() {
const _this = this; const _this = this;
const closeBtn = document.getElementById("modalCloseBtn"); const closeBtn = document.getElementById("createOverlay-closeBtn");
if (closeBtn) { if (closeBtn) {
closeBtn.onclick = ()=>{_this.setVisible(false)}; closeBtn.onclick = ()=>{_this.setVisible(false)};
} }
} }
self(): HTMLElement | null { self(): HTMLElement | null {
return document.getElementById("modal-container"); return document.getElementById("createOverlay-container");
} }
title(): HTMLElement | null{ title(): HTMLElement | null{
return document.getElementById("modal-title"); return document.getElementById("createOverlay-title");
} }
content(): HTMLElement | null { content(): HTMLElement | null {
return document.getElementById("modal-content"); return document.getElementById("createOverlay-content");
} }
submitBtn(): HTMLElement | null { submitBtn(): HTMLElement | null {
return document.getElementById("modal-submitBtn"); return document.getElementById("createOverlay-submitBtn");
} }
radiusContainer(): HTMLElement | null { radiusContainer(): HTMLElement | null {
@ -213,15 +213,15 @@ class OverlayState {
} }
nameField(): string { nameField(): string {
return (document.getElementById("modal-name") as HTMLInputElement)?.value ?? ""; return (document.getElementById("createOverlay-name") as HTMLInputElement)?.value ?? "";
} }
descField(): string { descField(): string {
return (document.getElementById("modal-desc") as HTMLInputElement)?.value ?? ""; return (document.getElementById("createOverlay-desc") as HTMLInputElement)?.value ?? "";
} }
radiusField(): string { radiusField(): string {
return (document.getElementById("modal-radius") as HTMLInputElement)?.value ?? ""; return (document.getElementById("createOverlay-radius") as HTMLInputElement)?.value ?? "";
} }
visible(): boolean { visible(): boolean {
@ -238,64 +238,57 @@ class OverlayState {
setState(state: OverlayType, args: any): void { setState(state: OverlayType, args: any): void {
const _this = this; const _this = this;
const title = this.title() const title = this.title()
const radiusContainer = _this.radiusContainer();
const radius = _this.radiusField();
const name = _this.nameField();
const desc = _this.descField();
const submitBtn = _this.submitBtn();
switch (state) { switch (state) {
case OverlayType.POINT: case OverlayType.POINT:
if (title) { if (title) {
title.innerHTML = "Add Marker"; title.innerHTML = "Add Marker";
} }
fetch("/static/pointModal.html") if (submitBtn) {
.then(r=>r.text()) submitBtn.onclick = () => {
.then(t=> { const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
const content = _this.content(); point.add(args.map);
if (content) { content.innerHTML = t; } args.overlays.markers.push(point);
const submitBtn = _this.submitBtn(); _this.setVisible(false);
if (submitBtn) { }
submitBtn.onclick = () => { }
const name = _this.nameField();
const desc = _this.descField();
const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
point.add(args.map);
args.overlays.markers.push(point);
_this.setVisible(false);
}
}
});
break; break;
case OverlayType.CIRCLE: case OverlayType.CIRCLE:
if (title) { if (title) {
title.innerHTML = "Add Circle"; title.innerHTML = "Add Circle";
} }
fetch("/static/pointModal.html") if (radiusContainer) {
.then(r=>r.text()) radiusContainer.style.display = "block";
.then(t=> { }
const content = _this.content(); if (submitBtn) {
if (content) { content.innerHTML = t; } submitBtn.onclick = () => {
const radiusContainer = _this.radiusContainer(); const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500});
if (radiusContainer) { circle.add(args.map);
radiusContainer.style.display = "block"; args.overlays.circles.push(circle);
} _this.setVisible(false);
const submitBtn = _this.submitBtn(); }
if (submitBtn) { }
submitBtn.onclick = () => {
const name = _this.nameField();
const desc = _this.descField();
const radius = _this.radiusField();
const circle = new Circle(name, desc, args.latlng, {radius: Number(radius)});
circle.add(args.map);
args.overlays.circles.push(circle);
_this.setVisible(false);
}
}
});
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
break; break;
} }
} }
}class MapHandlers { }class MapHandler {
map: L.Map;
overlays: OverlayState;
layers: TileLayerWrapper[];
constructor(map: L.Map, overlays: OverlayState, layers: TileLayerWrapper[]) {
this.map = map;
this.overlays = overlays;
this.layers = layers;
}
} }
function init(): void { function init(): void {
let overlays: OverlayState = OverlayState.load() ?? new OverlayState(); let overlays: OverlayState = OverlayState.load() ?? new OverlayState();
@ -307,7 +300,7 @@ function init(): void {
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ {
maxZoom: 19, maxZoom: 19,
attribution: '© OpenStreetMap' attribution: "street map tiles &copy; OpenStreetMap"
})); }));
const satelliteLayer = TileLayerWrapper.constructLayer( const satelliteLayer = TileLayerWrapper.constructLayer(
@ -316,7 +309,7 @@ function init(): void {
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{ {
maxZoom: 19, maxZoom: 19,
attribution: "&copy; Esri" attribution: "satellite tiles &copy; Esri"
})); }));
TileLayerWrapper.enableOnly(streetLayer, map); TileLayerWrapper.enableOnly(streetLayer, map);
@ -325,41 +318,56 @@ function init(): void {
overlays.circles.forEach(m=>m.add(map)); overlays.circles.forEach(m=>m.add(map));
overlays.polygons.forEach(m=>m.add(map)); overlays.polygons.forEach(m=>m.add(map));
const modal = new Modal(); const createOverlayModal = new CreateOverlayModal();
const closeAllModals = (): void => {
createOverlayModal.setVisible(false);
}
const resetMapClick = (): void => { const resetMapClick = (): void => {
try { try {
const addPointBtn = document.getElementById("addPoint-btn");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler); map.off("click", addMarkerHandler);
} catch {} } catch {}
try { try {
const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.classList.remove("activeBtn");
}
map.off("click", addCircleHandler); map.off("click", addCircleHandler);
} catch {} } catch {}
} }
const addMarkerHandler = (e: any): void => { const addMarkerHandler = (e: any): void => {
modal.setVisible(true); createOverlayModal.setVisible(true);
modal.setState(OverlayType.POINT, { createOverlayModal.setState(OverlayType.POINT, {
latlng: e.latlng, latlng: e.latlng,
map: map, map: map,
overlays: overlays, overlays: overlays,
}); });
map.off("click", addMarkerHandler); resetMapClick();
} }
const addCircleHandler = (e: any): void => { const addCircleHandler = (e: any): void => {
modal.setVisible(true); createOverlayModal.setVisible(true);
modal.setState(OverlayType.CIRCLE, { createOverlayModal.setState(OverlayType.CIRCLE, {
latlng: e.latlng, latlng: e.latlng,
map: map, map: map,
overlays: overlays, overlays: overlays,
}); });
map.off("click", addCircleHandler); resetMapClick();
} }
const addMarkerBtn = document.getElementById("addPoint-btn"); const addMarkerBtn = document.getElementById("addPoint-btn");
if (addMarkerBtn) { if (addMarkerBtn) {
addMarkerBtn.onclick = (e: any): void => { addMarkerBtn.onclick = (e: any): void => {
closeAllModals();
resetMapClick() resetMapClick()
addMarkerBtn.classList.add("activeBtn");
map.on("click", addMarkerHandler); map.on("click", addMarkerHandler);
}; };
} }
@ -367,7 +375,9 @@ function init(): void {
const addCircleBtn = document.getElementById("addCircle-btn"); const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) { if (addCircleBtn) {
addCircleBtn.onclick = (e: any): void => { addCircleBtn.onclick = (e: any): void => {
closeAllModals();
resetMapClick(); resetMapClick();
addCircleBtn.classList.add("activeBtn");
map.on("click", addCircleHandler); map.on("click", addCircleHandler);
} }
} }
@ -396,6 +406,11 @@ function init(): void {
} }
}; };
} }
const main = document.getElementById("app-container");
if (main) {
main.style.display = "initial";
}
} }
init(); init();

157
static/onyx-scry.js
View file

@ -170,118 +170,102 @@ var TileLayerWrapper = /** @class */ (function () {
TileLayerWrapper.layers = new Array(); TileLayerWrapper.layers = new Array();
return TileLayerWrapper; return TileLayerWrapper;
}()); }());
var Modal = /** @class */ (function () { var CreateOverlayModal = /** @class */ (function () {
function Modal() { function CreateOverlayModal() {
var _this = this; var _this = this;
var closeBtn = document.getElementById("modalCloseBtn"); var closeBtn = document.getElementById("createOverlay-closeBtn");
if (closeBtn) { if (closeBtn) {
closeBtn.onclick = function () { _this.setVisible(false); }; closeBtn.onclick = function () { _this.setVisible(false); };
} }
} }
Modal.prototype.self = function () { CreateOverlayModal.prototype.self = function () {
return document.getElementById("modal-container"); return document.getElementById("createOverlay-container");
}; };
Modal.prototype.title = function () { CreateOverlayModal.prototype.title = function () {
return document.getElementById("modal-title"); return document.getElementById("createOverlay-title");
}; };
Modal.prototype.content = function () { CreateOverlayModal.prototype.content = function () {
return document.getElementById("modal-content"); return document.getElementById("createOverlay-content");
}; };
Modal.prototype.submitBtn = function () { CreateOverlayModal.prototype.submitBtn = function () {
return document.getElementById("modal-submitBtn"); return document.getElementById("createOverlay-submitBtn");
}; };
Modal.prototype.radiusContainer = function () { CreateOverlayModal.prototype.radiusContainer = function () {
return document.getElementById("radius-container"); return document.getElementById("radius-container");
}; };
Modal.prototype.nameField = function () { CreateOverlayModal.prototype.nameField = function () {
var _a, _b; var _a, _b;
return (_b = (_a = document.getElementById("modal-name")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; return (_b = (_a = document.getElementById("createOverlay-name")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
}; };
Modal.prototype.descField = function () { CreateOverlayModal.prototype.descField = function () {
var _a, _b; var _a, _b;
return (_b = (_a = document.getElementById("modal-desc")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; return (_b = (_a = document.getElementById("createOverlay-desc")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
}; };
Modal.prototype.radiusField = function () { CreateOverlayModal.prototype.radiusField = function () {
var _a, _b; var _a, _b;
return (_b = (_a = document.getElementById("modal-radius")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; return (_b = (_a = document.getElementById("createOverlay-radius")) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
}; };
Modal.prototype.visible = function () { CreateOverlayModal.prototype.visible = function () {
var _a; var _a;
return ((_a = this.self()) === null || _a === void 0 ? void 0 : _a.style.display) != "none"; return ((_a = this.self()) === null || _a === void 0 ? void 0 : _a.style.display) != "none";
}; };
Modal.prototype.setVisible = function (v) { CreateOverlayModal.prototype.setVisible = function (v) {
var modal = this.self(); var modal = this.self();
if (modal) { if (modal) {
modal.style.display = v ? "block" : "none"; modal.style.display = v ? "block" : "none";
} }
}; };
Modal.prototype.setState = function (state, args) { CreateOverlayModal.prototype.setState = function (state, args) {
var _this = this; var _this = this;
var title = this.title(); var title = this.title();
var radiusContainer = _this.radiusContainer();
var radius = _this.radiusField();
var name = _this.nameField();
var desc = _this.descField();
var submitBtn = _this.submitBtn();
switch (state) { switch (state) {
case OverlayType.POINT: case OverlayType.POINT:
if (title) { if (title) {
title.innerHTML = "Add Marker"; title.innerHTML = "Add Marker";
} }
fetch("/static/pointModal.html") if (submitBtn) {
.then(function (r) { return r.text(); }) submitBtn.onclick = function () {
.then(function (t) { var point = new Marker(name, desc, args.latlng, { title: name, alt: name });
var content = _this.content(); point.add(args.map);
if (content) { args.overlays.markers.push(point);
content.innerHTML = t; _this.setVisible(false);
} };
var submitBtn = _this.submitBtn(); }
if (submitBtn) {
submitBtn.onclick = function () {
var name = _this.nameField();
var desc = _this.descField();
var point = new Marker(name, desc, args.latlng, { title: name, alt: name });
point.add(args.map);
args.overlays.markers.push(point);
_this.setVisible(false);
};
}
});
break; break;
case OverlayType.CIRCLE: case OverlayType.CIRCLE:
if (title) { if (title) {
title.innerHTML = "Add Circle"; title.innerHTML = "Add Circle";
} }
fetch("/static/pointModal.html") if (radiusContainer) {
.then(function (r) { return r.text(); }) radiusContainer.style.display = "block";
.then(function (t) { }
var content = _this.content(); if (submitBtn) {
if (content) { submitBtn.onclick = function () {
content.innerHTML = t; var circle = new Circle(name, desc, args.latlng, { radius: Number(radius) || 500 });
} circle.add(args.map);
var radiusContainer = _this.radiusContainer(); args.overlays.circles.push(circle);
if (radiusContainer) { _this.setVisible(false);
radiusContainer.style.display = "block"; };
} }
var submitBtn = _this.submitBtn();
if (submitBtn) {
submitBtn.onclick = function () {
var name = _this.nameField();
var desc = _this.descField();
var radius = _this.radiusField();
var circle = new Circle(name, desc, args.latlng, { radius: Number(radius) });
circle.add(args.map);
args.overlays.circles.push(circle);
_this.setVisible(false);
};
}
});
break; break;
case OverlayType.POLYGON: case OverlayType.POLYGON:
break; break;
} }
}; };
return Modal; return CreateOverlayModal;
}()); }());
var MapHandlers = /** @class */ (function () { var MapHandler = /** @class */ (function () {
function MapHandlers() { function MapHandler(map, overlays, layers) {
this.map = map;
this.overlays = overlays;
this.layers = layers;
} }
return MapHandlers; return MapHandler;
}()); }());
function init() { function init() {
var _a; var _a;
@ -289,56 +273,71 @@ function init() {
var map = L.map('map').setView([35.6653, -105.9507], 13); var map = L.map('map').setView([35.6653, -105.9507], 13);
var streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { var streetLayer = TileLayerWrapper.constructLayer("streetLayer", L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '© OpenStreetMap' attribution: "street map tiles &copy; OpenStreetMap"
})); }));
var satelliteLayer = TileLayerWrapper.constructLayer("satelliteLayer", L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { var satelliteLayer = TileLayerWrapper.constructLayer("satelliteLayer", L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 19, maxZoom: 19,
attribution: "&copy; Esri" attribution: "satellite tiles &copy; Esri"
})); }));
TileLayerWrapper.enableOnly(streetLayer, map); TileLayerWrapper.enableOnly(streetLayer, map);
overlays.markers.forEach(function (m) { return m.add(map); }); overlays.markers.forEach(function (m) { return m.add(map); });
overlays.circles.forEach(function (m) { return m.add(map); }); overlays.circles.forEach(function (m) { return m.add(map); });
overlays.polygons.forEach(function (m) { return m.add(map); }); overlays.polygons.forEach(function (m) { return m.add(map); });
var modal = new Modal(); var createOverlayModal = new CreateOverlayModal();
var closeAllModals = function () {
createOverlayModal.setVisible(false);
};
var resetMapClick = function () { var resetMapClick = function () {
try { try {
var addPointBtn = document.getElementById("addPoint-btn");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler); map.off("click", addMarkerHandler);
} }
catch (_a) { } catch (_a) { }
try { try {
var addCircleBtn_1 = document.getElementById("addCircle-btn");
if (addCircleBtn_1) {
addCircleBtn_1.classList.remove("activeBtn");
}
map.off("click", addCircleHandler); map.off("click", addCircleHandler);
} }
catch (_b) { } catch (_b) { }
}; };
var addMarkerHandler = function (e) { var addMarkerHandler = function (e) {
modal.setVisible(true); createOverlayModal.setVisible(true);
modal.setState(OverlayType.POINT, { createOverlayModal.setState(OverlayType.POINT, {
latlng: e.latlng, latlng: e.latlng,
map: map, map: map,
overlays: overlays overlays: overlays
}); });
map.off("click", addMarkerHandler); resetMapClick();
}; };
var addCircleHandler = function (e) { var addCircleHandler = function (e) {
modal.setVisible(true); createOverlayModal.setVisible(true);
modal.setState(OverlayType.CIRCLE, { createOverlayModal.setState(OverlayType.CIRCLE, {
latlng: e.latlng, latlng: e.latlng,
map: map, map: map,
overlays: overlays overlays: overlays
}); });
map.off("click", addCircleHandler); resetMapClick();
}; };
var addMarkerBtn = document.getElementById("addPoint-btn"); var addMarkerBtn = document.getElementById("addPoint-btn");
if (addMarkerBtn) { if (addMarkerBtn) {
addMarkerBtn.onclick = function (e) { addMarkerBtn.onclick = function (e) {
closeAllModals();
resetMapClick(); resetMapClick();
addMarkerBtn.classList.add("activeBtn");
map.on("click", addMarkerHandler); map.on("click", addMarkerHandler);
}; };
} }
var addCircleBtn = document.getElementById("addCircle-btn"); var addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) { if (addCircleBtn) {
addCircleBtn.onclick = function (e) { addCircleBtn.onclick = function (e) {
closeAllModals();
resetMapClick(); resetMapClick();
addCircleBtn.classList.add("activeBtn");
map.on("click", addCircleHandler); map.on("click", addCircleHandler);
}; };
} }
@ -365,5 +364,9 @@ function init() {
} }
}; };
} }
var main = document.getElementById("app-container");
if (main) {
main.style.display = "initial";
}
} }
init(); init();

9
static/pointModal.html
View file

@ -1,9 +0,0 @@
<label for="modal-name">Name</label><br/>
<input type="text" id="modal-name"><br/>
<label for="modal-desc">Description</label><br/>
<textarea id="modal-desc"></textarea><br/>
<div id="radius-container">
<label for="modal-radius">Radius (meters)</label><br/>
<input type="number" step="1" id="modal-radius" value="500"><br/>
</div>
<button id="modal-submitBtn">Add</button>

87
static/style.css
View file

@ -13,40 +13,74 @@ outline-style: none;
body { body {
align: center; align: center;
position: relative;
}
#noscript-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background: black;
z-index: 999;
text-align: center;
color: #c9c9c9;
line-height: 150%;
font-size: 2vw;
padding-top: calc(50vh - 5vw);
}
#noscript-container a {
color: #1f9b92;
}
#noscript-container a:hover {
color: white;
} }
#mapControls { #mapControls {
position: relative; position: fixed;
width: 100vw; width: 100vw;
bottom: 0;
background: black; background: black;
height: 2em;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
z-index: 3; z-index: 3;
} }
#mapControls button {
color: #1fb9b2;
border: none;
background: black;
font-size: 5vh;
padding-left: 0.5ch;
padding-right: 0.5ch;
border-bottom: solid 0.1em black;
}
#mapControls button.activeBtn, #mapControls button:hover {
color: white;
border-bottom: solid 0.1em #1f9b92;
}
#subControls { #subControls {
backgorund: transparent; backgorund: transparent;
float: right; float: right;
height: 2em;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
#mapControls button {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
#map { #map {
display: block; display: block;
position: relative; position: relative;
height: calc(100vh - 2.5em); height: 100vh;
width: 100vw; width: 100vw;
z-index: 1; z-index: 1;
} }
#modal-container { #createOverlay-container {
background: #000000; background: #000000;
color: #c9c9c9; color: #c9c9c9;
position: fixed; position: fixed;
@ -56,37 +90,46 @@ body {
left: 50%; left: 50%;
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
height: auto; height: auto;
max-height: calc(100vh - 2.5em); max-height: 100vh;
overflow: auto;
z-index: 4; z-index: 4;
text-align: left; text-align: left;
display: none; display: none;
} }
#modal-container h2 { .modalHeader {
text-align: center; position: sticky;
top: 0;
width: 100%;
height: auto;
}
#createOverlay-container h2 {
text-align: left;
font-size: 200%; font-size: 200%;
font-wieght: normal; font-wieght: normal;
text-transform: uppercase; text-transform: uppercase;
line-height: 2em; line-height: 2em;
margin-left: 1em;
} }
#modal-content { #createOverlay-content {
margin: 2em; margin: 2em;
text-align: right; text-align: right;
} }
#modal-content label{ #createOverlay-content label{
display: block; display: block;
float: left; float: left;
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
} }
#modal-content #radius-container { #createOverlay-content #radius-container {
display: none; display: none;
} }
#modal-content input[type="text"], #modal-content textarea, #modal-content input[type="number"] { #createOverlay-content input[type="text"], #createOverlay-content textarea, #createOverlay-content input[type="number"] {
display: block; display: block;
width: 100%; width: 100%;
font-size: 150%; font-size: 150%;
@ -100,13 +143,13 @@ body {
} }
#modal-content textarea { #createOverlay-content textarea {
resize: none; resize: none;
height: 8em; height: 8em;
} }
#modal-content input[type="number"] { #createOverlay-content input[type="number"] {
width: 12ch; width: 12ch;
text-align: right; text-align: right;
} }
@ -126,7 +169,7 @@ button.closeBtn:hover {
color: crimson; color: crimson;
} }
button#modal-submitBtn { button#createOverlay-submitBtn {
font-size: 150%; font-size: 150%;
background: transparent;; background: transparent;;
color: white; color: white;
@ -137,13 +180,13 @@ button#modal-submitBtn {
text-transform: uppercase; text-transform: uppercase;
} }
button#modal-submitBtn:hover { button#createOverlay-submitBtn:hover {
background: white; background: white;
color: black; color: black;
border: solid 2px white; border: solid 2px white;
} }
#cancel-container, #confirm-container { #cancel-container, #confirm-container, #info-container {
position: fixed; position: fixed;
font-size: 200%; font-size: 200%;
bottom: 1.5em; bottom: 1.5em;