all dynamic visual content is now handled by vue components

callbacks/static/js/viewer.js

@@ -1,3 +1,6 @@
+/*
+  Utility functions to help with some common tasks.
+*/
 function logger(message) {
   let datetime = new Date().toISOString();
   console.log(`[Webhook_logger] [${datetime}] ${message}`);
@@ -8,13 +11,9 @@ function getCallbackCode() {
   return urlParams.get("cb");
 }
 
-function setCallbackUrl() {
-  let protocol = document.location.protocol;
-  let host = document.location.host;
-  let submitURL = `${protocol}//${host}/${getCallbackCode()}`;
-  document.getElementById("callback-uuid-field").value = submitURL;
-}
-
+/*
+  Connection setup. All code that handles the websocket traffic.
+*/
 function setupConnection() {
   /*
     Setup a connection to receive all the information
@@ -46,13 +45,10 @@ function setupConnection() {
 }
 
 /*
-  Setup a simple component to handle the display of new content.
-  Only supports two functions:
-  - Add new content
-  - Clean existing content
+  Setup a simple components to handle the display of new content.
 */
 var requestList = new Vue({
-  el: "#app",
+  el: "#request-list",
   delimiters: ["[[", "]]"],
   data: {
     requests: []
@@ -91,7 +87,9 @@ var requestList = new Vue({
 var callbackDetails = new Vue({
   el: "#callback-details",
   delimiters: ["[[", "]]"],
-  data: {},
+  data: {
+    callback_url: ""
+  },
   methods: {
     copytoclipboard: function() {
       var url = document.getElementById("callback-uuid-field");
@@ -99,11 +97,15 @@ var callbackDetails = new Vue({
       document.execCommand("copy");
       alert("The callback url was copied to your clipboard.");
     }
+  },
+  mounted: function() {
+    let protocol = document.location.protocol;
+    let host = document.location.host;
+    this.callback_url = `${protocol}//${host}/${getCallbackCode()}`;
   }
 });
 
 /*
   Prepare the page for action
 */
-setCallbackUrl();
 setupConnection();

callbacks/templates/callbacks/check.html

@@ -33,7 +33,8 @@
                 id="callback-uuid-field"
                 class="input is-large is-info"
                 type="text"
-                placeholder="Large input"
+                placeholder="Callback URL"
+                v-model="callback_url"
                 readonly
               />
               <span class="icon is-medium is-left">
@@ -48,7 +49,7 @@
           </div>
         </div>
       </section>
-      <section class="section" id="app">
+      <section class="section" id="request-list">
         <div class="container">
           <div v-if="requests.length < 1" class="has-text-centered">
             No requests received yet