ed

resources/[tools]/dialog/web/src/App.vue

@@ -0,0 +1,165 @@
+<template>
+  <v-app style="background: transparent!important;">
+    <v-fade-transition>
+      <div class="dialog-bg" v-if="show">
+        <v-card color="bg" class="card ">
+          <v-card-title class="title">
+            <div>
+              <span class="font-weight-bold mr-2">
+                {{ data.firstname }} 
+              </span>
+              <span class="font-weight-light">
+                {{ data.lastname }}
+              </span>
+            </div>
+            <div style="flex-grow: 1;">
+
+            </div>
+            <div class="note" v-if="data.rep">
+              {{ data.rep }} Rep
+            </div>
+            <div class="note" v-if="data.type">
+              {{ data.type }}
+            </div>
+          </v-card-title>
+          <div class="text-dialog">
+            <div class="text bg-grey-darken-4 rounded">
+              {{ data.text }}
+            </div>
+            <div class="buttons">
+              <div class="button" v-for="(item, index) in data.buttons" @keyup.index="click(item)" @click="click(item)">
+                <div class="number">
+                  <p>
+                    {{ index+1 }}
+                  </p>
+                </div>
+                {{ item.text }}
+              </div>
+            </div>
+          </div>
+        </v-card>
+      </div>
+    </v-fade-transition>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  components: {
+  },
+  data: () => ({
+    show: false,
+    data: {
+      firstname: 'John',
+      lastname: 'Doe',
+      text: 'Lorem ipsum dolor sit amet',
+      type: '',
+      rep: '',
+      buttons: [
+        { text: 'Lorem ipsum dolor sit amet' }
+      ]
+    }
+  }),
+
+  methods: {
+    click(data){
+      post('click', data, (resp) => {
+        if (resp == 'close') {
+          this.show = false;
+          this.data = null;
+        }
+      })
+    },
+  },
+
+  mounted() {
+    this.escapeListener = window.addEventListener("keyup", (event) => {
+      if (!this.show) {
+        return
+      }
+      if (event.keyCode || 49 && event.keyCode || 51 && event.keyCode || 52 && event.keyCode || 53) { 
+        if ( this.data.buttons[event.keyCode - 49] ) {
+          this.click(this.data.buttons[event.keyCode - 49])
+        }
+      }
+    });
+    this.messageListener = window.addEventListener("message", (event) => {
+      const item = event.data || event.detail; //'detail' is for debugging via browsers
+      if (item.type == 'New') {
+        this.data = item.data
+        this.show = true
+      } else if (item.type == 'Continue') {
+        this.data.text = item.data.text
+        this.data.buttons = item.data.buttons
+      } else if (item.type == 'Set') {
+        this.data = item.data
+        this.show = true
+      } else if (item.type == 'Close') {
+        this.show = false;
+        this.data = null;
+      }
+    });
+  },
+}
+
+const resource = 'dialog';
+
+const post = (event, data, cb) => {
+  if (event) {
+    fetch(`https://${resource}/${event}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json; charset=UTF-8",
+      },
+      body: JSON.stringify(data || {}),
+    })
+      .then((resp) => resp.json())
+      .then((resp) => {
+        if (cb) {
+          cb(resp);
+        }
+      });
+  }
+};
+
+
+</script>
+
+<style>
+
+html {
+  overflow: hidden!important;
+}
+
+:root {
+  color-scheme: light !important;
+}
+
+#app {
+  background: transparent!important;
+  background-color: transparent!important;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+</style>

resources/[tools]/dialog/web/src/assets/logo.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>

resources/[tools]/dialog/web/src/assets/styles/style.scss

@@ -0,0 +1,68 @@
+
+.dialog-bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(133,133,133,0) 41%, rgba(1,214,193,0.3491771708683473) 100%);
+}
+
+.card {
+    position: absolute!important;
+    right: 0;
+    left: 0;
+    margin: auto !important;
+    width: fit-content;
+    bottom: 10vh;
+    .title {
+        display: flex;
+        align-items: center;
+        .note {
+            margin-left: 10px;
+            height: fit-content;
+            font-size: 15px;
+            background-color: rgba(0, 255, 255, 0.681);
+            border-radius: 5px;
+            color: #0e0e0e;
+            padding: 8px;
+            line-height: 6px;
+        }
+    }
+    .text-dialog {
+        margin: 2px 10px 10px 10px;
+        .text {
+            width: 610px;
+            padding: 5px 10px;
+            margin-bottom: 10px;
+            background: radial-gradient(circle, rgb(58, 58, 58) 0%, rgb(36, 36, 36) 100%);
+        }
+        .buttons {
+            display: grid;
+            grid-template-columns: 302px 302px;
+            grid-row: auto auto;
+            grid-column-gap: 7px;
+            grid-row-gap: 7px;
+            .button {
+                display: flex;
+                padding: 3px;
+                border-radius: 4px;
+                font-size: 12px;
+                align-items: center;
+                background-color: rgb(36, 36, 36);
+                .number {
+                    margin-right: 8px;
+                    width: 23px;
+                    height: 23px;
+                    border-radius: 4px;
+                    background-color: rgb(0, 255, 255);
+                    p {
+                        color: #414041;
+                        text-align: center;
+                        font-weight: bold;
+                        font-size: 15px;
+                    }
+                }
+            }
+        }
+    }
+}
+

resources/[tools]/dialog/web/src/main.js

@@ -0,0 +1,23 @@
+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Components
+
+import './assets/styles/style.scss'
+
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

resources/[tools]/dialog/web/src/plugins/index.js

@@ -0,0 +1,14 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import { loadFonts } from './webfontloader'
+import vuetify from './vuetify'
+
+export function registerPlugins (app) {
+  loadFonts()
+  app.use(vuetify)
+}

resources/[tools]/dialog/web/src/plugins/vuetify.js

@@ -0,0 +1,28 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark',
+    themes: {
+      dark: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+          bg: '#121212'
+        },
+      },
+    },
+  },
+})

resources/[tools]/dialog/web/src/plugins/webfontloader.js

@@ -0,0 +1,15 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+ export async function loadFonts () {
+  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
+
+  webFontLoader.load({
+    google: {
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
+    },
+  })
+}