Adding initial support for showing node contents.

This commit is contained in:
Sergiotarxz 2024-01-01 01:36:10 +01:00
parent 7994119d66
commit c38474614d
5 changed files with 91 additions and 4 deletions

View File

@ -211,6 +211,11 @@ export default class Conquer {
window.setTimeout(() => { window.setTimeout(() => {
this.isFeatureEnabledMap[feature.getProperties().type] = true this.isFeatureEnabledMap[feature.getProperties().type] = true
}, 100); }, 100);
const candidateNode = this.getServerNodes()[feature.getProperties().type];
if (candidateNode !== undefined) {
candidateNode.click(this.interfaceManager);
return;
}
if (feature === this.currentPositionFeature) { if (feature === this.currentPositionFeature) {
this.onClickSelf() this.onClickSelf()
return return

View File

@ -0,0 +1,36 @@
import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-top-bar-interface'
import Conquer from '@burguillosinfo/conquer'
import MapNode from '@burguillosinfo/conquer/map-node'
export default class NodeView extends AbstractTopBarInterface {
private node: MapNode;
private getNodeNameH2(): HTMLElement {
const element = this.getMainNode().querySelector('h2.node-name');
if (!(element instanceof HTMLElement)) {
Conquer.fail('h2.node-name is not a H2 or does not exist.');
}
return element;
}
private getNodeDescriptionParagraph(): HTMLElement {
const element = this.getMainNode().querySelector('p.node-description');
if (!(element instanceof HTMLElement)) {
Conquer.fail('p.node-description is not a P or does not exist.');
}
return element;
}
constructor(node: MapNode) {
super()
this.node = node;
}
public run() {
const mainNode = this.getMainNode()
const view = this.getNodeFromTemplateId('conquer-view-node-template')
mainNode.append(view)
this.getNodeNameH2().innerText = this.node.getName();
this.getNodeDescriptionParagraph().innerText = this.node.getDescription();
view.classList.remove('conquer-display-none')
mainNode.classList.remove('conquer-display-none')
}
}

View File

@ -5,11 +5,13 @@ import CircleStyle from 'ol/style/Circle'
import Point from 'ol/geom/Point' import Point from 'ol/geom/Point'
import Fill from 'ol/style/Fill' import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke' import Stroke from 'ol/style/Stroke'
import InterfaceManager from '@burguillosinfo/conquer/interface-manager'
import NodeView from '@burguillosinfo/conquer/interface/node-view'
@JsonObject() @JsonObject()
export default class MapNode { export default class MapNode {
private feature: Feature | null = null; private feature: Feature | null = null;
private callbacks: Record<string, Array<() => void>> = {}
constructor( constructor(
@JsonProperty() private uuid: string, @JsonProperty() private uuid: string,
@ -21,7 +23,33 @@ export default class MapNode {
@JsonProperty() private kind: string, @JsonProperty() private kind: string,
) { ) {
} }
public click(interfaceManager: InterfaceManager): void {
const viewNodeInterface = new NodeView(this);
viewNodeInterface.on('close', () => {
interfaceManager.remove(viewNodeInterface);
});
interfaceManager.push(viewNodeInterface);
this.runCallbacks('click');
}
public on(eventName: string, callback: () => void): void {
if (this.callbacks[eventName] === undefined) {
this.callbacks[eventName] = []
}
this.callbacks[eventName].push(callback)
}
protected runCallbacks(eventName: string) {
const callbacks = this.callbacks[eventName];
if (callbacks === undefined) {
return
}
for (const callback of callbacks) {
callback()
}
}
public getType(): string { public getType(): string {
return this.type; return this.type;
} }

File diff suppressed because one or more lines are too long

View File

@ -15,6 +15,13 @@
%= include 'conquer/_interface-with-top-bar-template'; %= include 'conquer/_interface-with-top-bar-template';
%= include 'conquer/_login-template'; %= include 'conquer/_login-template';
%= include 'conquer/_register-template'; %= include 'conquer/_register-template';
<div id="conquer-view-node-template" class="conquer-display-none conquer-interface-element-padded">
<div>
<h1>Vista de nodo.</h1>
<h2 class="node-name"></h2>
<p class="node-description"></p>
</div>
</div>
<div class="conquer-container"> <div class="conquer-container">
</div> </div>
</body> </body>