implemented rudimentary support for WebRequests (#635)

public/lang/de.json

@@ -262,6 +262,8 @@
     "inputs": {
         "name": "Name",
         "url": "URL",
+        "method": "Übertragungs Methode",
+        "payload": "Daten",
         "video_id": "Video ID/URL",
         "close_ad": "Anzeige auf dem Ausgabebildschirm schließen",
         "change_folder": "Wähle einen anderen Speicherort"

public/lang/en.json

@@ -280,6 +280,9 @@
     "inputs": {
         "name": "Name",
         "url": "URL",
+        "method": "Method",
+        "contentType": "Content Type",
+        "payload": "Payload",
         "video_id": "Video ID/URL",
         "close_ad": "Close ad on output screen",
         "start": "Start",
@@ -576,6 +579,7 @@
         "start_trigger": "Start trigger",
         "run_action": "Run action",
         "toggle_action": "Toggle action",
+        "send_rest_command": "Send HTTP-Request",
         "custom_activation": "Custom activation",
         "activate_on_startup": "Activate on startup",
         "activate_save": "Activate on save",
@@ -1131,4 +1135,4 @@
         "template": "Template",
         "category": "Category"
     }
-}
+}

src/frontend/components/actions/CustomInput.svelte

@@ -12,6 +12,7 @@
     import NumberInput from "../inputs/NumberInput.svelte"
     import TextInput from "../inputs/TextInput.svelte"
     import MidiValues from "./MidiValues.svelte"
+    import RestValues from "./RestValues.svelte"
     import ChooseStyle from "./specific/ChooseStyle.svelte"
     import MetronomeInputs from "../drawer/audio/MetronomeInputs.svelte"
 
@@ -86,6 +87,8 @@
             <Checkbox checked={value?.value} on:change={checkboxChanged} />
         </div>
     </CombinedInput>
+{:else if inputId === "rest"}
+    <RestValues rest={value} on:change={(e) => updateValue("", e)} />
 {:else}
     <CombinedInput style={inputId === "midi" ? "flex-direction: column;" : ""}>
         {#if inputId === "index"}

src/frontend/components/actions/RestValues.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+    import T from "../helpers/T.svelte"
+
+    import CombinedInput from "../inputs/CombinedInput.svelte"
+    import Dropdown from "../inputs/Dropdown.svelte"
+    import TextInput from "../inputs/TextInput.svelte"
+
+    import type { API_rest_command } from "./api"
+
+    export let rest: API_rest_command
+
+    /**
+     * onChange Handler for URL component
+     * This is a TextInput, so `e.target.value`
+     * @param e onChange Event
+     */
+    function updateUrl(e) {
+        // update url
+        rest.url = e.target.value
+        change()
+    }
+
+    /**
+     * onChange Handler for Method component
+     * This is a Dropdown, so `e.detail.name`
+     * @param e onChange Event
+     */
+    function updateMethod(e) {
+        // update method
+        rest.method = e.detail.name
+        change()
+    }
+
+    /**
+     * onChange Handler for Payload component
+     * This is a TextInput, so `e.target.value`
+     * @param e onChange Event
+     */
+    function updatePayload(e) {
+        // update payload
+        rest.payload = e.target.value
+        change()
+    }
+
+    /**
+     * onChange Handler for ContentType component
+     * This is a TextInput, so `e.target.value`
+     * @param e onChange Event
+     */
+    function updateContentType(e) {
+        // update ContentType
+        rest.contentType = e.target.value
+        change()
+    }
+
+    let dispatch = createEventDispatcher()
+    function change() {
+        dispatch("change", rest)
+    }
+
+    let dropdownInputs = [{ name: "GET" }, { name: "POST" }, { name: "PUT" }, { name: "DELETE" }]
+</script>
+
+<!-- URL -->
+<CombinedInput>
+    <p><T id="inputs.url" /></p>
+    <TextInput value={rest.url || ""} placeholder={"127.0.0.1"} on:change={(e) => updateUrl(e)} />
+</CombinedInput>
+
+<!-- Method -->
+<CombinedInput>
+    <p><T id="inputs.method" /></p>
+    <Dropdown value={rest.method || "GET"} options={dropdownInputs} on:click={(e) => updateMethod(e)} />
+</CombinedInput>
+
+<!-- ContentType -->
+<CombinedInput>
+    <p><T id="inputs.contentType" /></p>
+    <TextInput value={rest.contentType || ""} placeholder={"application/json"} on:change={(e) => updateContentType(e)} />
+</CombinedInput>
+
+<!-- Body -->
+<CombinedInput>
+    <p><T id="inputs.payload" /></p>
+    <TextInput value={rest.payload || ""} placeholder={"{}"} on:change={(e) => updatePayload(e)} />
+</CombinedInput>
+
+<!--
+TODO: Better Namings
+? Send WebRequest 
+
+- URL
+- Method
+- Content Type <-- einstellbar machen
+- Payload
+-->

src/frontend/components/actions/actionData.ts

@@ -57,4 +57,5 @@ export const actionData = {
     send_midi: { slideId: "sendMidi", name: "actions.send_midi", icon: "music", input: "midi" },
     run_action: { name: "actions.run_action", icon: "actions", input: "id" },
     toggle_action: { name: "actions.toggle_action", icon: "actions", input: "toggle_action" },
+    send_rest_command: { name: "actions.send_rest_command", icon: "trigger", input: "rest" },
 }

src/frontend/components/actions/api.ts

@@ -25,6 +25,7 @@ import { stopTimers } from "../helpers/timerTick"
 import { clearTimers } from "../output/clear"
 import { runActionId, toggleAction } from "./actions"
 import { changeVariable, gotoGroup, moveStageConnection, selectOverlayByIndex, selectOverlayByName, selectProjectByIndex, selectShowByName, selectSlideByIndex, selectSlideByName, toggleLock } from "./apiHelper"
+import { sendRestCommand } from "./rest"
 
 /// TYPES ///
 
@@ -72,6 +73,12 @@ export type API_metronome = {
     volume?: number
     // notesPerBeat?: number
 }
+export type API_rest_command = {
+    url: string
+    method: string
+    contentType: string
+    payload: string
+}
 
 /// ACTIONS ///
 
@@ -154,6 +161,7 @@ export const API_ACTIONS = {
     send_midi: (data: API_midi) => sendMidi(data), // BC
     run_action: (data: API_id) => runActionId(data.id), // BC
     toggle_action: (data: API_toggle) => toggleAction(data), // BC
+    send_rest_command: (data: API_rest_command) => sendRestCommand(data),
 }
 
 /// RECEIVER / SENDER ///

src/frontend/components/actions/rest.ts

@@ -0,0 +1,61 @@
+//import JZZ from "jzz"
+//import { toApp } from ".."
+import type { API_rest_command } from "./api"
+
+export async function sendRestCommand(data: API_rest_command) {
+
+    // For Debugging:
+    //console.log("Send REST (isch) Command:");
+    //console.log("URL:", data.url);
+    //console.log("Method:", data.method);
+    //console.log("Content-Type:", data.contentType);
+    //console.log("Payload:", data.payload);
+
+    // Prepare options:
+    const options: RequestInit = {};
+
+    // if a Method is set, use the given Method, else use GET as default
+    if (data.method) {
+        options.method = data.method;
+    }
+    else {
+        // on default use GET-Request
+        options.method = "GET";
+        console.log("Using Default GET");
+    }
+
+    // if Content Type is set, add the corresponding field in the Request-Header
+    if (data.contentType) {
+        options.headers = { 'Content-Type': data.contentType }
+    }
+
+    // If a Payload is provoded, add it to the requests body
+    if (data.payload && (data.method === 'POST' || data.method === 'PUT')) {
+        //options.body = JSON.stringify(data.payload);
+        options.body = data.payload;
+    }
+
+    // Check if URL starts with HTTP or HTTPS, if not insert HTTP on default
+    if (!(data.url.startsWith("http://") || data.url.startsWith("https://"))) {
+        data.url = "http://" + data.url;
+    }
+
+    try {
+        const response = await fetch(data.url, options);
+
+        if (!response.ok) {
+            //throw new Error(`HTTP error! status: ${response.status}`);
+            console.error(`HTTP error! status: ${response.status}`);
+        }
+
+        //let result : String = await response.json();
+        let result: String = await response.text();
+        console.log(result);
+
+        //return result;
+
+    } catch (error) {
+        console.error('Request failed:', error);
+        //throw error;
+    }
+}