Adding initial support for showing node contents.

js-src/conquer/index.ts

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

js-src/conquer/interface/node-view.ts

@@ -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')
+    }
+}

js-src/conquer/map-node.ts

@@ -5,11 +5,13 @@ import CircleStyle from 'ol/style/Circle'
 import Point from 'ol/geom/Point'
 import Fill from 'ol/style/Fill'
 import Stroke from 'ol/style/Stroke'
+import InterfaceManager from '@burguillosinfo/conquer/interface-manager'
+import NodeView from '@burguillosinfo/conquer/interface/node-view'
 
 @JsonObject()
 export default class MapNode {
     private feature: Feature | null = null;
-
+    private callbacks: Record<string, Array<() => void>> = {}
 
     constructor(
         @JsonProperty() private uuid: string,
@@ -21,7 +23,33 @@ export default class MapNode {
         @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 {
         return this.type;
     }

templates/conquer/index.html.ep

@@ -15,6 +15,13 @@
 %= include 'conquer/_interface-with-top-bar-template';
 %= include 'conquer/_login-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>
     </body>