Add front-end interface to backend

server/src/config/about.rs

@@ -1,6 +1,6 @@
 use serde::{Serialize, Deserialize};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct AboutConfig {
     pub name: String,
     pub version: String,

server/src/config/action.rs

@@ -1,13 +1,13 @@
 use serde::{Serialize, Deserialize};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 #[serde(tag = "action")]
 pub enum ActionConfig {
     #[serde(rename = "command")] 
     Command(CommandAction),
 }
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct CommandAction {
     pub run: String,
 }

server/src/config/base.rs

@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::{ElementConfig, AboutConfig};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 #[serde(tag = "api-version")]
 pub enum BaseConfig {
     #[serde(rename = "v0.0.0")]

server/src/config/button.rs

@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct ButtonConfig {
     pub title: String,
     pub on_click: ActionConfig,

server/src/config/element.rs

@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::{ButtonConfig, ToggleConfig, SliderConfig, ReadingConfig};
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 #[serde(tag = "element")]
 pub enum ElementConfig {
     #[serde(rename = "button")]

server/src/config/mod.rs

@@ -36,6 +36,9 @@ mod test {
                 }),
                 ElementConfig::Slider(SliderConfig {
                     title: "Test Slider".into(),
+                    min: 0,
+                    max: 3,
+                    notches: None,
                     on_set: ActionConfig::Command(CommandAction{run: "echo 'hello slider'".into()}),
                 }),
                 ElementConfig::Reading(ReadingConfig {

server/src/config/reading.rs

@@ -2,9 +2,9 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct ReadingConfig {
     pub title: String,
-    pub period_ms: usize,
+    pub period_ms: u64,
     pub on_period: ActionConfig,
 }

server/src/config/slider.rs

@@ -2,8 +2,11 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct SliderConfig {
     pub title: String,
+    pub min: u64,
+    pub max: u64,
+    pub notches: Option<Vec<String>>,
     pub on_set: ActionConfig,
 }

server/src/config/toggle.rs

@@ -2,7 +2,7 @@ use serde::{Serialize, Deserialize};
 
 use super::ActionConfig;
 
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Clone)]
 pub struct ToggleConfig {
     pub title: String,
     pub description: Option<String>,

src/backend.ts

@@ -0,0 +1,81 @@
+import {init_usdpl, target, init_embedded, call_backend} from "usdpl-front";
+
+const USDPL_PORT: number = 25717;
+
+// Utility
+
+export function resolve(promise: Promise<any>, setter: any) {
+    (async function () {
+        let data = await promise;
+        if (data != null) {
+            console.debug("Got resolved", data);
+            setter(data);
+        } else {
+            console.warn("Resolve failed:", data);
+        }
+    })();
+}
+
+export async function initBackend() {
+    // init usdpl
+    await init_embedded();
+    init_usdpl(USDPL_PORT);
+    console.log("USDPL started for framework: " + target());
+    //setReady(true);
+}
+
+export type CAbout = {
+    name: string;
+    version: string;
+    description: string;
+    url: string | null;
+    author: string | null;
+    license: string | null;
+}
+
+export type CButton = {
+    element: string; // "button"
+    title: string;
+}
+
+export type CToggle {
+    element: string; // "toggle"
+    title: string;
+    description: string | null;
+}
+
+export type CSlider {
+    element: string; // "slider"
+    title: string;
+    min: number;
+    max: number;
+    notches: string[] | null;
+}
+
+export type CReading {
+    element: string; // "reading"
+    title: string;
+    period_ms: number;
+}
+
+export type CElement = CButton | CToggle | CSlider | CReading;
+
+export async function getElements(): Promise<CElement[]> {
+    return await call_backend("get_items", []);
+}
+
+export async function onUpdate(index: number, value: any): Promise<any> {
+    return (await call_backend("on_update", [index, value]))[0];
+}
+
+export async function getReading(index: number): Promise<string | null> {
+    return (await call_backend("get_reading", [index]))[0];
+}
+
+export async function getAbout(): Promise<CAbout> {
+    return (await call_backend("get_about", []))[0];
+}
+
+export async function reload(): Promise<CElement[]> {
+    return await call_backend("reload", []);
+}

src/index.tsx

@@ -17,8 +17,7 @@ import { FaShip } from "react-icons/fa";
 import logo from "../assets/logo.png";
 
 import {init_usdpl, target, init_embedded, call_backend} from "usdpl-front";
-
+import * as backend from "./backend";
-const USDPL_PORT: number = 54321;
 
 // interface AddMethodArgs {
 //   left: number;