Simplified update process
This commit is contained in:
parent
5e0d54601c
commit
5c9fb293e9
6 changed files with 51 additions and 69 deletions
|
@ -5,6 +5,7 @@ import {QuestionDefinition} from "../../Logic/Question";
|
||||||
import {TagRenderingOptions} from "../TagRendering";
|
import {TagRenderingOptions} from "../TagRendering";
|
||||||
import {NameInline} from "../Questions/NameInline";
|
import {NameInline} from "../Questions/NameInline";
|
||||||
import {NameQuestion} from "../Questions/NameQuestion";
|
import {NameQuestion} from "../Questions/NameQuestion";
|
||||||
|
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||||
|
|
||||||
export class Bookcases extends LayerDefinition {
|
export class Bookcases extends LayerDefinition {
|
||||||
|
|
||||||
|
@ -19,7 +20,7 @@ export class Bookcases extends LayerDefinition {
|
||||||
|
|
||||||
this.title = new NameInline("ruilboekenkastje");
|
this.title = new NameInline("ruilboekenkastje");
|
||||||
this.elementsToShow = [
|
this.elementsToShow = [
|
||||||
|
new ImageCarouselWithUploadConstructor(),
|
||||||
new TagRenderingOptions({
|
new TagRenderingOptions({
|
||||||
question: "Heeft dit boekenruilkastje een naam?",
|
question: "Heeft dit boekenruilkastje een naam?",
|
||||||
freeform: {
|
freeform: {
|
||||||
|
|
|
@ -25,16 +25,4 @@ export class VerticalCombine extends UIElement {
|
||||||
}
|
}
|
||||||
return "<div class='"+this._className+"'>" + html + "</div>";
|
return "<div class='"+this._className+"'>" + html + "</div>";
|
||||||
}
|
}
|
||||||
InnerUpdate(htmlElement: HTMLElement) {
|
|
||||||
for (const element of this._elements){
|
|
||||||
element.Update();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Activate() {
|
|
||||||
for (const element of this._elements){
|
|
||||||
element.Activate();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
|
@ -115,18 +115,4 @@ export class FeatureInfoBox extends UIElement {
|
||||||
"</div>";
|
"</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
Activate() {
|
|
||||||
super.Activate();
|
|
||||||
for (const infobox of this._infoboxes) {
|
|
||||||
infobox.Activate();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Update() {
|
|
||||||
super.Update();
|
|
||||||
this._title.Update();
|
|
||||||
for (const infobox of this._infoboxes) {
|
|
||||||
infobox.Update();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,10 +43,5 @@ export class QuestionPicker extends UIElement {
|
||||||
highestQ.CreateHtml(this.source).Render() +
|
highestQ.CreateHtml(this.source).Render() +
|
||||||
"</div>";
|
"</div>";
|
||||||
}
|
}
|
||||||
InnerUpdate(htmlElement: HTMLElement) {
|
|
||||||
}
|
|
||||||
|
|
||||||
Activate() {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import {UIEventSource} from "./UIEventSource";
|
import {UIEventSource} from "./UIEventSource";
|
||||||
|
import instantiate = WebAssembly.instantiate;
|
||||||
|
|
||||||
export abstract class UIElement {
|
export abstract class UIElement {
|
||||||
|
|
||||||
|
@ -58,20 +59,22 @@ export abstract class UIElement {
|
||||||
}
|
}
|
||||||
element.style.pointerEvents = "all";
|
element.style.pointerEvents = "all";
|
||||||
element.style.cursor = "pointer";
|
element.style.cursor = "pointer";
|
||||||
/*
|
|
||||||
const childs = element.children;
|
|
||||||
for (let i = 0; i < childs.length; i++) {
|
|
||||||
const ch = childs[i];
|
|
||||||
console.log(ch);
|
|
||||||
ch.style.cursor = "pointer";
|
|
||||||
ch.onclick = () => {
|
|
||||||
self._onClick();
|
|
||||||
}
|
|
||||||
ch.style.pointerEvents = "all";
|
|
||||||
}*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.InnerUpdate(element);
|
this.InnerUpdate(element);
|
||||||
|
|
||||||
|
for (const i in this) {
|
||||||
|
const child = this[i];
|
||||||
|
if (child instanceof UIElement) {
|
||||||
|
child.Update();
|
||||||
|
} else if (child instanceof Array) {
|
||||||
|
for (const ch of child) {
|
||||||
|
if (ch instanceof UIElement) {
|
||||||
|
ch.Update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
HideOnEmpty(hide : boolean){
|
HideOnEmpty(hide : boolean){
|
||||||
|
@ -89,7 +92,7 @@ export abstract class UIElement {
|
||||||
|
|
||||||
AttachTo(divId: string) {
|
AttachTo(divId: string) {
|
||||||
let element = document.getElementById(divId);
|
let element = document.getElementById(divId);
|
||||||
if(element === null){
|
if (element === null) {
|
||||||
console.log("SEVERE: could not attach UIElement to ", divId);
|
console.log("SEVERE: could not attach UIElement to ", divId);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -99,7 +102,21 @@ export abstract class UIElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected abstract InnerRender(): string;
|
protected abstract InnerRender(): string;
|
||||||
public Activate(): void {};
|
|
||||||
|
public Activate(): void {
|
||||||
|
for (const i in this) {
|
||||||
|
const child = this[i];
|
||||||
|
if (child instanceof UIElement) {
|
||||||
|
child.Activate();
|
||||||
|
} else if (child instanceof Array) {
|
||||||
|
for (const ch of child) {
|
||||||
|
if (ch instanceof UIElement) {
|
||||||
|
ch.Activate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
public IsEmpty(): boolean {
|
public IsEmpty(): boolean {
|
||||||
return this.InnerRender() === "";
|
return this.InnerRender() === "";
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {UIEventSource} from "./UIEventSource";
|
||||||
import {Basemap} from "../Logic/Basemap";
|
import {Basemap} from "../Logic/Basemap";
|
||||||
import L from "leaflet";
|
import L from "leaflet";
|
||||||
import {FixedUiElement} from "./Base/FixedUiElement";
|
import {FixedUiElement} from "./Base/FixedUiElement";
|
||||||
|
import {VariableUiElement} from "./Base/VariableUIElement";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles and updates the user badge
|
* Handles and updates the user badge
|
||||||
|
@ -13,6 +14,7 @@ export class UserBadge extends UIElement {
|
||||||
private _pendingChanges: UIElement;
|
private _pendingChanges: UIElement;
|
||||||
private _logout: UIElement;
|
private _logout: UIElement;
|
||||||
private _basemap: Basemap;
|
private _basemap: Basemap;
|
||||||
|
private _homeButton: UIElement;
|
||||||
|
|
||||||
|
|
||||||
constructor(userDetails: UIEventSource<UserDetails>,
|
constructor(userDetails: UIEventSource<UserDetails>,
|
||||||
|
@ -38,6 +40,21 @@ export class UserBadge extends UIElement {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this._homeButton = new VariableUiElement(
|
||||||
|
userDetails.map((userinfo) => {
|
||||||
|
if (userinfo.home) {
|
||||||
|
return "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
})
|
||||||
|
).onClick(() => {
|
||||||
|
const home = userDetails.data?.home;
|
||||||
|
if (home === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
basemap.map.flyTo([home.lat, home.lon], 18);
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected InnerRender(): string {
|
protected InnerRender(): string {
|
||||||
|
@ -66,9 +83,7 @@ export class UserBadge extends UIElement {
|
||||||
dryrun = " <span class='alert'>TESTING</span>";
|
dryrun = " <span class='alert'>TESTING</span>";
|
||||||
}
|
}
|
||||||
|
|
||||||
let home = "";
|
|
||||||
if (user.home !== undefined) {
|
if (user.home !== undefined) {
|
||||||
home = "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
|
|
||||||
const icon = L.icon({
|
const icon = L.icon({
|
||||||
iconUrl: 'assets/home.svg',
|
iconUrl: 'assets/home.svg',
|
||||||
iconSize: [20, 20],
|
iconSize: [20, 20],
|
||||||
|
@ -91,7 +106,7 @@ export class UserBadge extends UIElement {
|
||||||
dryrun +
|
dryrun +
|
||||||
"</p> " +
|
"</p> " +
|
||||||
"<p id='userstats'>" +
|
"<p id='userstats'>" +
|
||||||
home +
|
this._homeButton.Render() +
|
||||||
settings +
|
settings +
|
||||||
messageSpan +
|
messageSpan +
|
||||||
"<span id='csCount'> " +
|
"<span id='csCount'> " +
|
||||||
|
@ -104,25 +119,5 @@ export class UserBadge extends UIElement {
|
||||||
"</div>";
|
"</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
InnerUpdate(htmlElement: HTMLElement) {
|
|
||||||
this._pendingChanges.Update();
|
|
||||||
var btn = document.getElementById("home");
|
|
||||||
if (btn) {
|
|
||||||
const self = this;
|
|
||||||
btn.onclick = function () {
|
|
||||||
const home = self._userDetails?.data?.home;
|
|
||||||
if (home === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
self._basemap.map.flyTo([home.lat, home.lon], 18);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this._logout.Update();
|
|
||||||
}
|
|
||||||
|
|
||||||
Activate() {
|
|
||||||
this._pendingChanges.Activate();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in a new issue