Added logo upload feature

src/Features/properties_templates.ts

@@ -10,25 +10,49 @@ export async function initPropertiesTemplates(): Promise<void> {
             if (property.type === "int" || property.type === "bool" || property.type === "object") {
                 continue;
             }
+
             const template = new TemplateValue(property.value, WA.state);
             if (template.isPureString()) {
                 continue;
             }
             const newValue = template.getValue();
-            setProperty(layerName, property.name, newValue);
+            setLayerProperty(layerName, property.name, newValue);
 
             template.onChange((newValue) => {
-                setProperty(layerName, property.name, newValue);
+                setLayerProperty(layerName, property.name, newValue);
             });
         }
+
+        // Parse the URL of the integrated websites (for example if mustache is used)
+        // Here we want to select the Tiled object layers with the type 'website' and the property 'url'
+        if (layer.type === "objectgroup") {
+            for (const object of layer.objects) {
+                if (object.type === "website") {
+                    for (const property of object.properties) {
+                        if (property.name === "url") {
+                            const template = new TemplateValue(property.value, WA.state);
+                            if (template.isPureString()) {
+                                continue;
+                            }
+                            const newValue = template.getValue();
+                            await setWebsiteProperty(object.name, newValue);
+
+                            template.onChange((newValue) => {
+                                setWebsiteProperty(object.name, newValue);
+                            });
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 
 /**
- * Sets the property value on the map.
+ * Sets the property value of a layer on the map.
  * Furthermore, if the property name is "visible", modify the visibility of the layer.
  */
-function setProperty(layerName: string, propertyName: string, value: string): void {
+function setLayerProperty(layerName: string, propertyName: string, value: string): void {
     WA.room.setProperty(layerName, propertyName, value);
     if (propertyName === "visible") {
         if (value) {
@@ -38,3 +62,11 @@ function setProperty(layerName: string, propertyName: string, value: string): vo
         }
     }
 }
+
+/**
+ * Sets the property value of an object of type 'website' on the map.
+ */
+async function setWebsiteProperty(objectName: string, value: string): Promise<void> {
+    const website = await WA.room.website.get(objectName);
+    website.url = value;
+}

src/Iframes/Configuration/Components/Field.svelte

@@ -13,6 +13,13 @@
 
     const stringVariableStore = variableStore as Writable<string>;
     const boolVariableStore = variableStore as Writable<boolean>;
+    let error: string;
+
+    let container: HTMLElement;
+    let input: HTMLInputElement;
+    let image: HTMLImageElement;
+    let showImage = false;
+    const formData = new FormData()
 
     function getAllowedValues() {
         const allowedValuesStr = variable.properties.mustGetString('allowed_values');
@@ -22,6 +29,44 @@
     function onChange(event: Event) {
         $variableStore = (event.target as HTMLInputElement).value;
     }
+
+    function onUpload(event: Event) {
+        const files = (event.target as HTMLInputElement).files;
+        const file = files ? files[0] : null;
+        error = '';
+
+        if (file) {
+            showImage = true;
+            const reader = new FileReader();
+            reader.onload = () => {
+                if (typeof reader.result === "string") {
+                    formData.append('file', file)
+                    image.setAttribute("src", reader.result);
+                    // Just for the rendering, doesn't touch the actual file
+                    image.style.maxWidth = "128px";
+                    image.style.maxHeight = "64px";
+                }
+            };
+            reader.readAsDataURL(file);
+            return;
+        }
+        showImage = false;
+    }
+
+    function uploadFile() {
+        error = '';
+
+        fetch('https://some-api-for-the-upload', {
+            method: 'POST',
+            body: formData
+        }).then(response => response.json())
+            .then(data => {
+                $variableStore = data.url;
+            }).catch(e => {
+            error = 'An error occurred. Please try later.'
+            throw new Error(e)
+        })
+    }
 </script>
 
 
@@ -49,6 +94,30 @@
                 </label>
             {/each}
     </div>
+{:else if type === 'upload' }
+    <div class="nes-field field upload">
+        <span>{label}</span>
+        <div class="field">
+            <input type="file" accept="image/*"
+                   name={variable.name}
+                   id="upload_{variable.name}"
+                   bind:this={input}
+                   on:change={onUpload}
+                   class="nes-btn">
+
+            <div>
+                <div bind:this={container} class="image-preview">
+                    {#if showImage}
+                        <img bind:this={image} src="" alt="Preview" />
+                    {:else}
+                        <span>/</span>
+                    {/if}
+                </div>
+
+                <button class="nes-btn is-primary upload-btn" on:click={uploadFile}>Upload & Replace</button>
+            </div>
+        </div>
+    </div>
 {:else}
     <div class="nes-field field">
         <label for="input_{variable.name}">{label}</label>
@@ -59,6 +128,9 @@
 <div class="description">{ description }</div>
 {/if}
 
+{#if error }
+<div class="error"><p>{ error }</p></div>
+{/if}
 
 <style lang="scss">
     .field {
@@ -70,4 +142,34 @@
         color: #777;
         margin-bottom: 30px;
     }
+
+    .upload {
+        height: 64px;
+
+        .image-preview {
+            width: 128px;
+            min-height: 64px;
+            border: 2px solid #ddd;
+            margin-top: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: #ccc;
+            float: left;
+        }
+
+        .upload-btn {
+            float: left;
+            display: flex;
+            margin-top: 20px;
+            margin-left: 20px;
+        }
+    }
+
+    .error {
+        margin-top: 25px;
+        color: #cb2525;
+        display: inline-block;
+    }
 </style>