From fb0ccfc8e65be641f47323d36d3c8c6592c83559 Mon Sep 17 00:00:00 2001
From: Lea Anthony <lea.anthony@gmail.com>
Date: Sat, 17 Oct 2020 15:10:13 +1100
Subject: [PATCH] WIP Events.On

---
 v2/test/kitchensink/frontend/rollup.config.js |  2 +-
 .../frontend/src/components/CodeBlock.svelte  |  4 +-
 .../frontend/src/components/FakeTerm.svelte   | 18 ++++-
 .../frontend/src/pages/events/Events.svelte   |  7 +-
 .../frontend/src/pages/events/On/On.svelte    | 73 +++++++++++++++++++
 .../src/pages/events/On/description.txt       |  1 +
 .../kitchensink/frontend/src/utils/utils.js   |  4 +
 7 files changed, 101 insertions(+), 8 deletions(-)
 create mode 100644 v2/test/kitchensink/frontend/src/pages/events/On/On.svelte
 create mode 100644 v2/test/kitchensink/frontend/src/pages/events/On/description.txt
 create mode 100644 v2/test/kitchensink/frontend/src/utils/utils.js

diff --git a/v2/test/kitchensink/frontend/rollup.config.js b/v2/test/kitchensink/frontend/rollup.config.js
index 4e4c37b12..fb6380880 100644
--- a/v2/test/kitchensink/frontend/rollup.config.js
+++ b/v2/test/kitchensink/frontend/rollup.config.js
@@ -29,7 +29,7 @@ export default {
 
 		// Embed text files
 		string({
-			include: ["**/*.jsx","**/*.go"],
+			include: ["**/*.jsx","**/*.go", "**/*.txt"],
 		}),
 		
 		svelte({
diff --git a/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte b/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
index ee23561d0..fbfb277f9 100644
--- a/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
+++ b/v2/test/kitchensink/frontend/src/components/CodeBlock.svelte
@@ -26,7 +26,7 @@
         showCode = !showCode;
     }   
 
-    export let id;
+    export let id = "toggle-" + Date.now().toString() + Math.random().toString();
     
     // Handle hiding example
     let showRun = true;
@@ -47,7 +47,7 @@
             </span>
         </span>
         {#if description}
-        <div class="description">{description}</div>
+        <div class="description">{@html description}</div>
         {/if}
     </div>
     <div class="run"> 
diff --git a/v2/test/kitchensink/frontend/src/components/FakeTerm.svelte b/v2/test/kitchensink/frontend/src/components/FakeTerm.svelte
index 86d804e81..c2657a39a 100644
--- a/v2/test/kitchensink/frontend/src/components/FakeTerm.svelte
+++ b/v2/test/kitchensink/frontend/src/components/FakeTerm.svelte
@@ -1,12 +1,27 @@
 <script>
+import { afterUpdate } from 'svelte';
+
     import { darkMode } from '../Store';
 
     $: termClass = $darkMode ? 'faketerm-dark' : 'faketerm-light';
+
+    let termElement;
+
+    afterUpdate( () => {
+        termElement.scrollTop = termElement.scrollHeight;
+    });
+
+    export let text = "";
+    export let style = null;
 </script>
 
-<div class="common {termClass}">
+<div bind:this={termElement} class="common {termClass}" {style}>
 <pre>
+{#if text && text.length > 0}
+{text}
+{:else}
 <slot></slot>
+{/if}
 </pre>
 </div>
 
@@ -23,6 +38,7 @@
         margin-top: 10px;
         margin-bottom: 10px;
         border: 1px solid #5555;
+        overflow: auto;
     }
 
     .faketerm-dark {
diff --git a/v2/test/kitchensink/frontend/src/pages/events/Events.svelte b/v2/test/kitchensink/frontend/src/pages/events/Events.svelte
index dab7d4b3a..a22be766e 100644
--- a/v2/test/kitchensink/frontend/src/pages/events/Events.svelte
+++ b/v2/test/kitchensink/frontend/src/pages/events/Events.svelte
@@ -1,7 +1,5 @@
 <script>
-
-    import CodeBlock from '../../components/CodeBlock.svelte';
-
+    import On from './On/On.svelte';
 </script>
 
 <div>
@@ -20,7 +18,8 @@
 
     <div style="padding: 15px"></div>
      
-    <CodeBlock title="Events.On(eventName, callback)" description="etc etc etc "></CodeBlock>
+    <On></On>
+
 </div>
 
 <style>
diff --git a/v2/test/kitchensink/frontend/src/pages/events/On/On.svelte b/v2/test/kitchensink/frontend/src/pages/events/On/On.svelte
new file mode 100644
index 000000000..c5b5412c7
--- /dev/null
+++ b/v2/test/kitchensink/frontend/src/pages/events/On/On.svelte
@@ -0,0 +1,73 @@
+<script>
+    import { Events } from '@wails/runtime';
+    import { writable } from 'svelte/store';
+    import CodeBlock from '../../../components/CodeBlock.svelte';
+    import description from './description.txt';
+    import { UniqueID } from '../../../utils/utils';
+    import FakeTerm from '../../../components/FakeTerm.svelte';
+
+    let isJs = false;
+    let jsCode = "js";
+    let goCode = "go";
+    $: lang = isJs ? 'Javascript' : 'Go';
+
+    // Listeners
+    let listeners = writable([]);
+    let id = UniqueID('events');
+
+    let eventName = "";
+    let loggingOutput = writable("");
+
+    function subscribe() {
+        if (eventName.length == 0) {
+            return
+        }
+
+        // Add eventName to listeners list
+        listeners.update( (current) => {
+            // Don't add twice
+            if( current.includes(eventName) ) {
+                return current;
+            }
+            return current.concat(eventName);
+        });
+
+        if( isJs ) {
+            console.log("Adding listener for " + eventName);
+            Events.On(eventName, (data) => {
+                console.log("CALLED! " + eventName);
+                loggingOutput.update( (log) => {
+                    let datatext = (data ? JSON.stringify(data) : "(No data given)");
+                    return log + "[" + eventName + "] " + datatext + "\n";
+                });
+            })
+        } else {
+            console.log("go!");
+        }
+    }
+
+</script>
+
+<CodeBlock bind:isJs={isJs} {jsCode} {goCode} {id} title="Events.On(eventName, callback)" {description}>
+    <div class="logging-form">
+        <form data-wails-no-drag class="mw-full"> 
+            Subscribed to:
+            <div class="form-group">
+                <ul class="list">
+                {#each $listeners as listener}
+                    <li>"{listener}"</li>
+                {/each}
+            </div>
+
+            <div class="form-group">
+                <label for="{id}-eventName" class="required">Event Name to subscribe to</label>
+                <input type="text" class="form-control" id="{id}-eventName" placeholder="MyEventName" bind:value="{eventName}" required="required">
+            </div>
+
+            <input class="btn btn-primary" type="button" on:click="{subscribe}" value="Subscribe using {lang} runtime">
+
+            <FakeTerm text={$loggingOutput} style="height: 300px; overflow: scroll"></FakeTerm>
+
+        </form>
+    </div>
+</CodeBlock>
diff --git a/v2/test/kitchensink/frontend/src/pages/events/On/description.txt b/v2/test/kitchensink/frontend/src/pages/events/On/description.txt
new file mode 100644
index 000000000..e27867950
--- /dev/null
+++ b/v2/test/kitchensink/frontend/src/pages/events/On/description.txt
@@ -0,0 +1 @@
+Events.On is used to subscribe to events. The given callback will be called whenever an event matching the given event name is received.
diff --git a/v2/test/kitchensink/frontend/src/utils/utils.js b/v2/test/kitchensink/frontend/src/utils/utils.js
new file mode 100644
index 000000000..1e75c4e45
--- /dev/null
+++ b/v2/test/kitchensink/frontend/src/utils/utils.js
@@ -0,0 +1,4 @@
+
+export function UniqueID(text) {
+    return text + "-" + Date.now().toString() + Math.random().toString();
+}
\ No newline at end of file