code

.env

@@ -0,0 +1,16 @@
+# Placeholder values of corse, replace in prod :)
+
+MYSQL_DATABASE=directus
+MYSQL_USER=directus
+MYSQL_PASSWORD=abc1234568
+MYSQL_RANDOM_ROOT_PASSWORD=yes
+
+DIRECTUS_APP_ENV=production
+DIRECTUS_AUTH_PUBLICKEY=123
+DIRECTUS_AUTH_SECRETKEY=456
+
+DIRECTUS_DATABASE_HOST=mysql
+DIRECTUS_DATABASE_PORT=3306
+DIRECTUS_DATABASE_NAME=directus
+DIRECTUS_DATABASE_USERNAME=directus
+DIRECTUS_DATABASE_PASSWORD=abc1234568

.gitignore

@@ -0,0 +1,9 @@
+# Node
+.cache
+node_modules
+
+# Build
+dist
+
+# Docker
+data

docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.7'
+
+services:
+  mysql:
+    image: mysql:5.7
+    env_file: .env
+    volumes:
+      - ./data/db:/var/lib/mysql
+
+  directus:
+    image: directus/directus:v8-apache
+    env_file: .env
+    volumes:
+      - ./data/config:/var/directus/config
+      - ./data/uploads:/var/directus/public/uploads
+      - ./dist:/var/directus/public/extensions/custom/modules/remote-trigger
+    ports:
+      - 80:80

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "advanced-webhooks",
+  "version": "1.0.0",
+  "description": "",
+  "main": "",
+  "scripts": {
+    "build": "rm -rf ./dist/* && directus-extensions build",
+    "dev": "directus-extensions watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "GPL-3.0",
+  "dependencies": {
+    "vue": "^2.6.11",
+    "vue-hot-reload-api": "^2.3.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.5",
+    "@directus/extension-toolkit": "^0.8.0",
+    "@vue/component-compiler-utils": "^2.6.0",
+    "sass": "^1.17.3",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

src/meta.json

@@ -0,0 +1,7 @@
+{
+  "name": "Remote Trigger",
+  "version": "1.0.0",
+  "icon": "build",
+  "types": ["string"],
+  "options": {}
+}

src/module.vue

@@ -0,0 +1,102 @@
+<template>
+  <section>
+    <h1 class="type-title">Build App</h1>
+
+    <p>
+      <label for="method">Method</label>
+
+      <select v-model="settings.method" id="method">
+        <option value="GET">Get</option>
+        <option value="POST">Post</option>
+      </select>
+
+      <label for="url">Url</label>
+      <input v-model="settings.url" id="url" />
+      <br />
+      <button @click="save">Save</button>
+    </p>
+
+    <p>
+      <button class="action" @click="deploy">Deploy</button>
+    </p>
+  </section>
+</template>
+
+<script>
+const KEY = 'awh:all'
+
+export default {
+  name: 'AWH',
+  data() {
+    return {
+      id: null,
+      settings: {
+        url: '',
+        method: 'GET',
+      },
+    }
+  },
+  methods: {
+    async save() {
+      if (this.id)
+        await this.$api.api.request('patch', '/settings/' + this.id, {}, { value: JSON.stringify(this.settings) })
+    },
+    async deploy() {
+      const response = await fetch(this.settings.url, { method: this.settings.method })
+      console.log(response)
+    },
+  },
+  async mounted() {
+    const { data } = await this.$api.api.request('get', '/settings', {}, {})
+    const saved = Object.values(data).find((s) => s.key === KEY)
+    if (!saved) await this.$api.api.request('post', '/settings', {}, { key: KEY, value: JSON.stringify(this.settings) })
+    else {
+      try {
+        this.settings = JSON.parse(saved.value)
+        this.id = saved.id
+      } catch {}
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+section {
+  padding: 1em;
+  color: var(--input-text-color);
+}
+
+p {
+  margin: 1em 0;
+}
+
+button {
+  appearance: none;
+  padding: 0.5em 1em;
+  background-color: var(--action);
+  border-radius: var(--border-radius);
+}
+
+button.action {
+  background-color: var(--action);
+}
+
+input,
+select {
+  appearance: none;
+  border-radius: var(--border-radius);
+  background-color: transparent;
+  border: var(--input-border-width) solid var(--input-border-color);
+  padding: 0.75em;
+  margin-bottom: 1em;
+}
+
+input {
+  width: 100%;
+}
+
+label {
+  font-size: 1.25em;
+  margin-bottom: 0.25em;
+}
+</style>