weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reorganized client source code

Browse Source 
Removed many useless and old classes
Started transition to new CSS
Added URIs for specific REST requests
This commit is contained in:
Pax1601
2023-03-05 21:29:58 +01:00
parent ed2343c704
commit 360c85b563
228 changed files with 1088 additions and 3635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/controls/button.ts
View File

@@ -1,38 +0,0 @@
export class Button {
#container: HTMLElement | null;
#srcs: string[];
#callback: CallableFunction;
#img: any;
#state: number = 0;
constructor(ID: string, srcs: string[], callback: CallableFunction) {
this.#container = document.getElementById(ID);
this.#srcs = srcs;
this.#callback = callback;
if (this.#container != null) {
this.#img = document.createElement("img");
this.#img.src = this.#srcs[this.#state];
this.#container.appendChild(this.#img);
this.#container.addEventListener("click", () => this.#onClick());
}
}
setState(state: number) {
if (state < this.#srcs.length) {
this.#state = state;
this.#img.src = this.#srcs[this.#state];
}
}
getState() {
return this.#state;
}
#onClick() {
if (this.#img != null) {
this.setState(this.#state < this.#srcs.length - 1 ? this.#state + 1 : 0);
if (this.#callback)
this.#callback(this.#state);
}
}
}

85
client/src/controls/contextmenu.ts
View File

@@ -1,61 +1,33 @@
import { LatLng } from "leaflet";
import { getActiveCoalition, setActiveCoalition } from "..";
import { ContextMenuOption } from "../@types/dom";
export class ContextMenu {
#container: HTMLElement | null;
#display: string;
constructor(id: string,) {
this.#container = document.getElementById(id);
this.#display = '';
if (this.#container != null) {
this.#container.querySelector("#coalition-switch")?.addEventListener('change', (e) => this.#onSwitch(e))
this.#display = this.#container.style.display;
this.hide();
}
this.#container?.querySelector("#switch")?.addEventListener('change', (e) => this.#onSwitch(e))
this.hide();
}
show(x: number, y: number, title: string, options: any, callback: CallableFunction, showCoalition: boolean) {
/* Hide to remove buttons, if present */
this.hide();
show(x: number, y: number, title: string, options: ContextMenuOption[], showCoalition: boolean) {
this.#container?.classList.toggle("hide", false);
this.#container?.querySelector("#list")?.replaceChildren(...options.map((option: ContextMenuOption) => {
var li = document.createElement("li");
var button = document.createElement("button");
button.textContent = option.tooltip;
li.appendChild(button);
button.addEventListener("click", (e: MouseEvent) => option.callback((e.target as HTMLButtonElement).innerText));
return button;
}));
this.#container?.querySelector("#switch")?.classList.toggle("hide", !showCoalition);
if (this.#container != null && options.length >= 1) {
var titleDiv = this.#container.querySelector("#ol-selection-scroll-top-bar")?.querySelector(".ol-selection-scroll-title");
var titleDiv = this.#container.querySelector("#title");
if (titleDiv)
titleDiv.innerHTML = title;
this.#container.style.display = this.#display;
var scroll = this.#container.querySelector(".ol-selection-scroll");
if (scroll != null)
{
for (let optionID in options) {
var node = document.createElement("div");
node.classList.add("ol-selection-scroll-element");
if (typeof options[optionID] === 'string' || options[optionID] instanceof String){
node.appendChild(document.createTextNode(options[optionID]));
node.addEventListener('click', () => callback(options[optionID]));
}
else {
node.appendChild(document.createTextNode(options[optionID].tooltip));
node.addEventListener('click', () => options[optionID].callback());
}
scroll.appendChild(node);
}
}
/* Hide the coalition switch if required */
var switchContainer = <HTMLElement>this.#container.querySelector("#ol-selection-scroll-top-bar")?.querySelector("#coalition-switch-container");
if (showCoalition == false) {
switchContainer.style.display = "none";
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--neutral-coalition-color"));
}
else {
switchContainer.style.display = "block";
if (getActiveCoalition() == "blue")
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
else
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--red-coalition-color"));
}
titleDiv.textContent = title;
if (x - this.#container.offsetWidth / 2 + this.#container.offsetWidth < window.innerWidth)
this.#container.style.left = x - this.#container.offsetWidth / 2 + "px";
@@ -66,34 +38,19 @@ export class ContextMenu {
this.#container.style.top = y - 20 + "px";
else
this.#container.style.top = window.innerHeight - this.#container.offsetHeight + "px";
}
}
hide() {
if (this.#container != null) {
this.#container.style.display = "none";
var buttons = this.#container.querySelectorAll(".ol-selection-scroll-element");
var scroll = this.#container.querySelector(".ol-selection-scroll");
if (scroll != null)
{
for (let child of buttons) {
scroll.removeChild(child);
}
}
}
this.#container?.classList.toggle("hide", true);
}
#onSwitch(e: any) {
if (this.#container != null) {
if (e.currentTarget.checked) {
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--red-coalition-color"));
if (e.currentTarget.checked)
setActiveCoalition("red");
}
else {
document.documentElement.style.setProperty('--active-coalition-color', getComputedStyle(this.#container).getPropertyValue("--blue-coalition-color"));
else
setActiveCoalition("blue");
}
}
}
}

61
client/src/controls/dropdown.ts
View File

@@ -1,61 +0,0 @@
export class Dropdown {
#container: HTMLElement | null;
#options: string[];
#open?: boolean;
#content?: HTMLElement;
#callback?: CallableFunction;
constructor(ID: string, options: string[], callback: CallableFunction) {
this.#container = document.getElementById(ID);
this.#options = options;
this.#callback = callback;
this.close()
this.#container?.addEventListener("click", () => {
this.#open ? this.close() : this.open();
})
if (this.#container != null && this.#options.length > 0)
this.#container.innerHTML = this.#options[0];
}
open() {
if (this.#container != null) {
this.#open = true;
this.#container.classList.add("ol-dropdown-open");
this.#container.classList.remove("ol-dropdown-closed");
this.#content = document.createElement("div");
this.#content.classList.add("ol-dropdown-content");
this.#content.style.width = (this.#container.offsetWidth - this.#container.offsetHeight) + "px";
this.#content.style.left = this.#container.offsetLeft + "px";
this.#content.style.top = this.#container.offsetTop + this.#container.offsetHeight + "px";
document.body.appendChild(this.#content);
var height = 2;
for (let optionID in this.#options) {
var node = document.createElement("div");
node.classList.add("ol-dropdown-element");
node.appendChild(document.createTextNode(this.#options[optionID]));
this.#content.appendChild(node);
height += node.offsetHeight + 2;
node.addEventListener('click', () => {
this.close();
if (this.#container != null)
this.#container.innerHTML = this.#options[optionID];
if (this.#callback != null)
this.#callback(this.#options[optionID])
})
}
this.#content.style.height = height + "px";
}
}
close() {
if (this.#container != null) {
this.#open = false;
this.#container?.classList.remove("ol-dropdown-open");
this.#container?.classList.add("ol-dropdown-closed");
if (this.#content != null)
document.body.removeChild(this.#content);
}
}
}

2
client/src/controls/slider.ts
View File

@@ -64,7 +64,7 @@ export class Slider {
{
this.#container.classList.toggle("active", newActive);
if (!newActive && this.#value != null)
this.#value.innerHTML = "Mixed values"
this.#value.innerText = "Mixed values";
}
}