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>
</head>
<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="mapControls">
@ -17,45 +22,70 @@
<button id="addCircle-btn">&compfn;</button>
<button id="addPolygon-btn">&diamond;</button>
<div id="subControls">
<button id="save-btn"><3</button>
<button id="tiles-btn">&larr;&rarr;</button>
<button id="clear-btn">XXX</button>
<button id="save-btn">&darr;</button>
<button id="tiles-btn">&Colon;</button>
<button id="clear-btn">&olarr;</button>
<button id="menu-btn">&equiv;</button>
</div>
</div>
<div id="modal-container">
<button class="closeBtn" id="modalCloseBtn">x</button>
<h2 id="modal-title"></h2>
<div id="modal-content">
<div id="createOverlay-container">
<div class="modalHeader">
<button class="closeBtn" id="createOverlay-closeBtn">x</button>
<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 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 id="confirm-container">
<span id="confirm-msg"></span>
<button id="yes-btn">Yes</button>
<button id="no-btn">No</button>
<div class="multiBtn-container">
<button class="positive-btn" id="yes-btn">Yes</button>
<button class="negative-btn" id="no-btn">No</button>
</div>
</div>
<div id="import-export-container">
<h2></h2>
<textarea id="import-export-textarea"></textarea>
<button id="import-export-ok-btn">OK</button>
<button id="import-export-cancel-btn">Cancel</button>
<div class="multiBtn-container">
<button id="import-export-ok-btn">OK</button>
<button id="import-export-cancel-btn">Cancel</button>
</div>
</div>
<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="circles-wrapper"><summary>Circles</summary><ul id="circles-list"></ul></details>
<details id="polygons-wrapper"><summary>Polygons</summary><ul id="polygons-list"></ul></details>
<button id="import-btn">Import</button>
<button id="export-all-btn">Export All</button>
<div class="multiBtn-container">
<button id="import-btn">Import</button>
<button id="export-all-btn">Export All</button>
</div>
</div>
<!--</div>-->
</body>
<link rel='stylesheet' type="text/css" href="/static/leaflet.css">
<script src="/static/leaflet.js"></script>

6
src/.srcmap
View file

@ -1,5 +1,5 @@
10-overlay.ts 147
11-tilelayer.ts 37
20-modal.ts 112
30-handlers.ts 2
99-onyx-scry.ts 103
20-createOverlayModal.ts 96
30-handlers.ts 11
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;
}
}
}

13
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;
}
}

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

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

139
src/onyx-scry.ts
View file

@ -182,30 +182,30 @@ class OverlayState {
}
}
}
}class Modal {
}class CreateOverlayModal {
constructor() {
const _this = this;
const closeBtn = document.getElementById("modalCloseBtn");
const closeBtn = document.getElementById("createOverlay-closeBtn");
if (closeBtn) {
closeBtn.onclick = ()=>{_this.setVisible(false)};
}
}
self(): HTMLElement | null {
return document.getElementById("modal-container");
return document.getElementById("createOverlay-container");
}
title(): HTMLElement | null{
return document.getElementById("modal-title");
return document.getElementById("createOverlay-title");
}
content(): HTMLElement | null {
return document.getElementById("modal-content");
return document.getElementById("createOverlay-content");
}
submitBtn(): HTMLElement | null {
return document.getElementById("modal-submitBtn");
return document.getElementById("createOverlay-submitBtn");
}
radiusContainer(): HTMLElement | null {
@ -213,15 +213,15 @@ class OverlayState {
}
nameField(): string {
return (document.getElementById("modal-name") as HTMLInputElement)?.value ?? "";
return (document.getElementById("createOverlay-name") as HTMLInputElement)?.value ?? "";
}
descField(): string {
return (document.getElementById("modal-desc") as HTMLInputElement)?.value ?? "";
return (document.getElementById("createOverlay-desc") as HTMLInputElement)?.value ?? "";
}
radiusField(): string {
return (document.getElementById("modal-radius") as HTMLInputElement)?.value ?? "";
return (document.getElementById("createOverlay-radius") as HTMLInputElement)?.value ?? "";
}
visible(): boolean {
@ -238,64 +238,57 @@ class OverlayState {
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";
}
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);
}
}
});
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";
}
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);
}
}
});
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;
}
}
}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 {
let overlays: OverlayState = OverlayState.load() ?? new OverlayState();
@ -307,7 +300,7 @@ function init(): void {
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19,
attribution: '© OpenStreetMap'
attribution: "street map tiles &copy; OpenStreetMap"
}));
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}',
{
maxZoom: 19,
attribution: "&copy; Esri"
attribution: "satellite tiles &copy; Esri"
}));
TileLayerWrapper.enableOnly(streetLayer, map);
@ -325,41 +318,56 @@ function init(): void {
overlays.circles.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 => {
try {
const addPointBtn = document.getElementById("addPoint-btn");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler);
} catch {}
try {
const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.classList.remove("activeBtn");
}
map.off("click", addCircleHandler);
} catch {}
}
const addMarkerHandler = (e: any): void => {
modal.setVisible(true);
modal.setState(OverlayType.POINT, {
createOverlayModal.setVisible(true);
createOverlayModal.setState(OverlayType.POINT, {
latlng: e.latlng,
map: map,
overlays: overlays,
});
map.off("click", addMarkerHandler);
resetMapClick();
}
const addCircleHandler = (e: any): void => {
modal.setVisible(true);
modal.setState(OverlayType.CIRCLE, {
createOverlayModal.setVisible(true);
createOverlayModal.setState(OverlayType.CIRCLE, {
latlng: e.latlng,
map: map,
overlays: overlays,
});
map.off("click", addCircleHandler);
resetMapClick();
}
const addMarkerBtn = document.getElementById("addPoint-btn");
if (addMarkerBtn) {
addMarkerBtn.onclick = (e: any): void => {
closeAllModals();
resetMapClick()
addMarkerBtn.classList.add("activeBtn");
map.on("click", addMarkerHandler);
};
}
@ -367,7 +375,9 @@ function init(): void {
const addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.onclick = (e: any): void => {
closeAllModals();
resetMapClick();
addCircleBtn.classList.add("activeBtn");
map.on("click", addCircleHandler);
}
}
@ -396,6 +406,11 @@ function init(): void {
}
};
}
const main = document.getElementById("app-container");
if (main) {
main.style.display = "initial";
}
}
init();

157
static/onyx-scry.js
View file

@ -170,118 +170,102 @@ var TileLayerWrapper = /** @class */ (function () {
TileLayerWrapper.layers = new Array();
return TileLayerWrapper;
}());
var Modal = /** @class */ (function () {
function Modal() {
var CreateOverlayModal = /** @class */ (function () {
function CreateOverlayModal() {
var _this = this;
var closeBtn = document.getElementById("modalCloseBtn");
var closeBtn = document.getElementById("createOverlay-closeBtn");
if (closeBtn) {
closeBtn.onclick = function () { _this.setVisible(false); };
}
}
Modal.prototype.self = function () {
return document.getElementById("modal-container");
CreateOverlayModal.prototype.self = function () {
return document.getElementById("createOverlay-container");
};
Modal.prototype.title = function () {
return document.getElementById("modal-title");
CreateOverlayModal.prototype.title = function () {
return document.getElementById("createOverlay-title");
};
Modal.prototype.content = function () {
return document.getElementById("modal-content");
CreateOverlayModal.prototype.content = function () {
return document.getElementById("createOverlay-content");
};
Modal.prototype.submitBtn = function () {
return document.getElementById("modal-submitBtn");
CreateOverlayModal.prototype.submitBtn = function () {
return document.getElementById("createOverlay-submitBtn");
};
Modal.prototype.radiusContainer = function () {
CreateOverlayModal.prototype.radiusContainer = function () {
return document.getElementById("radius-container");
};
Modal.prototype.nameField = function () {
CreateOverlayModal.prototype.nameField = function () {
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;
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;
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;
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();
if (modal) {
modal.style.display = v ? "block" : "none";
}
};
Modal.prototype.setState = function (state, args) {
CreateOverlayModal.prototype.setState = function (state, args) {
var _this = this;
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) {
case OverlayType.POINT:
if (title) {
title.innerHTML = "Add Marker";
}
fetch("/static/pointModal.html")
.then(function (r) { return r.text(); })
.then(function (t) {
var content = _this.content();
if (content) {
content.innerHTML = t;
}
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);
};
}
});
if (submitBtn) {
submitBtn.onclick = function () {
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;
case OverlayType.CIRCLE:
if (title) {
title.innerHTML = "Add Circle";
}
fetch("/static/pointModal.html")
.then(function (r) { return r.text(); })
.then(function (t) {
var content = _this.content();
if (content) {
content.innerHTML = t;
}
var radiusContainer = _this.radiusContainer();
if (radiusContainer) {
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);
};
}
});
if (radiusContainer) {
radiusContainer.style.display = "block";
}
if (submitBtn) {
submitBtn.onclick = function () {
var 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;
}
};
return Modal;
return CreateOverlayModal;
}());
var MapHandlers = /** @class */ (function () {
function MapHandlers() {
var MapHandler = /** @class */ (function () {
function MapHandler(map, overlays, layers) {
this.map = map;
this.overlays = overlays;
this.layers = layers;
}
return MapHandlers;
return MapHandler;
}());
function init() {
var _a;
@ -289,56 +273,71 @@ function init() {
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', {
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}', {
maxZoom: 19,
attribution: "&copy; Esri"
attribution: "satellite tiles &copy; Esri"
}));
TileLayerWrapper.enableOnly(streetLayer, map);
overlays.markers.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); });
var modal = new Modal();
var createOverlayModal = new CreateOverlayModal();
var closeAllModals = function () {
createOverlayModal.setVisible(false);
};
var resetMapClick = function () {
try {
var addPointBtn = document.getElementById("addPoint-btn");
if (addPointBtn) {
addPointBtn.classList.remove("activeBtn");
}
map.off("click", addMarkerHandler);
}
catch (_a) { }
try {
var addCircleBtn_1 = document.getElementById("addCircle-btn");
if (addCircleBtn_1) {
addCircleBtn_1.classList.remove("activeBtn");
}
map.off("click", addCircleHandler);
}
catch (_b) { }
};
var addMarkerHandler = function (e) {
modal.setVisible(true);
modal.setState(OverlayType.POINT, {
createOverlayModal.setVisible(true);
createOverlayModal.setState(OverlayType.POINT, {
latlng: e.latlng,
map: map,
overlays: overlays
});
map.off("click", addMarkerHandler);
resetMapClick();
};
var addCircleHandler = function (e) {
modal.setVisible(true);
modal.setState(OverlayType.CIRCLE, {
createOverlayModal.setVisible(true);
createOverlayModal.setState(OverlayType.CIRCLE, {
latlng: e.latlng,
map: map,
overlays: overlays
});
map.off("click", addCircleHandler);
resetMapClick();
};
var addMarkerBtn = document.getElementById("addPoint-btn");
if (addMarkerBtn) {
addMarkerBtn.onclick = function (e) {
closeAllModals();
resetMapClick();
addMarkerBtn.classList.add("activeBtn");
map.on("click", addMarkerHandler);
};
}
var addCircleBtn = document.getElementById("addCircle-btn");
if (addCircleBtn) {
addCircleBtn.onclick = function (e) {
closeAllModals();
resetMapClick();
addCircleBtn.classList.add("activeBtn");
map.on("click", addCircleHandler);
};
}
@ -365,5 +364,9 @@ function init() {
}
};
}
var main = document.getElementById("app-container");
if (main) {
main.style.display = "initial";
}
}
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 {
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 {
position: relative;
position: fixed;
width: 100vw;
bottom: 0;
background: black;
height: 2em;
padding: 0;
box-sizing: border-box;
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 {
backgorund: transparent;
float: right;
height: 2em;
padding: 0;
box-sizing: border-box;
}
#mapControls button {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
#map {
display: block;
position: relative;
height: calc(100vh - 2.5em);
height: 100vh;
width: 100vw;
z-index: 1;
}
#modal-container {
#createOverlay-container {
background: #000000;
color: #c9c9c9;
position: fixed;
@ -56,37 +90,46 @@ body {
left: 50%;
transform: translate3d(-50%, -50%, 0);
height: auto;
max-height: calc(100vh - 2.5em);
max-height: 100vh;
overflow: auto;
z-index: 4;
text-align: left;
display: none;
}
#modal-container h2 {
text-align: center;
.modalHeader {
position: sticky;
top: 0;
width: 100%;
height: auto;
}
#createOverlay-container h2 {
text-align: left;
font-size: 200%;
font-wieght: normal;
text-transform: uppercase;
line-height: 2em;
margin-left: 1em;
}
#modal-content {
#createOverlay-content {
margin: 2em;
text-align: right;
}
#modal-content label{
#createOverlay-content label{
display: block;
float: left;
text-transform: uppercase;
color: white;
}
#modal-content #radius-container {
#createOverlay-content #radius-container {
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;
width: 100%;
font-size: 150%;
@ -100,13 +143,13 @@ body {
}
#modal-content textarea {
#createOverlay-content textarea {
resize: none;
height: 8em;
}
#modal-content input[type="number"] {
#createOverlay-content input[type="number"] {
width: 12ch;
text-align: right;
}
@ -126,7 +169,7 @@ button.closeBtn:hover {
color: crimson;
}
button#modal-submitBtn {
button#createOverlay-submitBtn {
font-size: 150%;
background: transparent;;
color: white;
@ -137,13 +180,13 @@ button#modal-submitBtn {
text-transform: uppercase;
}
button#modal-submitBtn:hover {
button#createOverlay-submitBtn:hover {
background: white;
color: black;
border: solid 2px white;
}
#cancel-container, #confirm-container {
#cancel-container, #confirm-container, #info-container {
position: fixed;
font-size: 200%;
bottom: 1.5em;