Fix updatanid display

crates/sp_client/src/api.rs

@@ -194,8 +194,8 @@ pub fn get_processes() -> ApiResult<get_process_return> {
         version: String::from("1.0"),
         members: members.clone(),
         html: crate::process::HTML_UPDATE_ID.to_owned(),
-        style: crate::process::CSS.to_owned(),
-        script: "".to_owned(),
+        style: crate::process::CSSUPDATE.to_owned(),
+        script: crate::process::JSUPDATE.to_owned(),
     };
     let process3 = Process {
         id: 3,
@@ -233,7 +233,6 @@ pub fn get_processes() -> ApiResult<get_process_return> {
     data_process.push(process4);
     data_process.push(process5);
     Ok(get_process_return(data_process))
-    
 }
 
 //for testing

crates/sp_client/src/process.rs

@@ -1,11 +1,10 @@
 use std::fmt::DebugStruct;
 
-use wasm_bindgen::prelude::*;
 use serde::{Deserialize, Serialize};
-use tsify::Tsify;
 use serde_json::{json, Value};
 use sp_backend::silentpayments::sending::SilentPaymentAddress;
-
+use tsify::Tsify;
+use wasm_bindgen::prelude::*;
 
 pub const HTML_CREATE_ID: &str = "
         <div class='card'>
@@ -322,6 +321,157 @@ pub const CSS: &str = "
     }
     ";
 
+pub const CSSUPDATE: &str = "
+    <style>
+    body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background-color: #f4f4f4;
+        font-family: 'Arial', sans-serif;
+    }
+
+    .container {
+        max-width: 400px;
+        width: 100%;
+        padding: 20px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        background-color: #ffffff;
+        border-radius: 8px;
+        text-align: left;
+        overflow: hidden;
+    }
+
+    form {
+        display: grid;
+        grid-template-columns: repeat(1fr, 2fr);
+        gap: 10px;
+        max-width: 400px;
+        margin: auto;
+    }
+
+    .bg-primary {
+        background-color: #1a61ed;
+    }
+
+    .bg-primary:hover {
+        background-color: #457be8;
+    }
+
+    .bg-secondary {
+        background-color: #2b81ed;
+    }
+
+    .bg-secondary:hover {
+        background-color: #5f9bff;
+    }
+
+    label {
+        text-align: left;
+        padding-right: 10px;
+        line-height: 2;
+    }
+
+    input {
+        width: 100%;
+        padding: 8px;
+        box-sizing: border-box;
+    }
+
+    button {
+        grid-column: span 2;
+        display: inline-block;
+        color: #fff;
+        border: none;
+        padding: 12px 17px;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    .div-text-area {
+        grid-column: span 2;
+    }
+
+    textarea {
+        width: 100%;
+        padding: 8px;
+        box-sizing: border-box;
+    }
+
+    .side-by-side {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        margin-bottom: 5px;
+    }
+    .circle-btn {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        border: none;
+        color: white;
+        padding: 0px;
+        text-align: center;
+    }
+
+    #fileInput {
+        width: 100%;
+        padding: 8px;
+        padding-left: 0px;
+        box-sizing: border-box;
+    }
+    </style>
+    ";
+
+pub const JSUPDATE: &str = "
+    var addSpAddressBtn = document.getElementById('add-sp-address-btn');
+    var removeSpAddressBtn = document.querySelectorAll('.minus-sp-address-btn');
+
+    addSpAddressBtn.addEventListener('click', function (event) {
+        addDynamicField(this);
+    });
+
+    function addDynamicField(element) {
+        var addSpAddressBlock = document.getElementById('sp-address-block');
+        var spAddress = addSpAddressBlock.querySelector('#sp-address').value;
+        addSpAddressBlock.querySelector('#sp-address').value = '';
+        spAddress = spAddress.trim();
+        if (spAddress != '') {
+            var sideBySideDiv = document.createElement('div');
+            sideBySideDiv.className = 'side-by-side';
+
+            var inputElement = document.createElement('input');
+            inputElement.type = 'text';
+            inputElement.name = 'spAddresses[]';
+            inputElement.setAttribute('form', 'no-form');
+            inputElement.value = spAddress;
+            inputElement.disabled = true;
+
+            var buttonElement = document.createElement('button');
+            buttonElement.type = 'button';
+            buttonElement.className =
+            'circle-btn bg-secondary minus-sp-address-btn';
+            buttonElement.innerHTML = '-';
+
+            buttonElement.addEventListener('click', function (event) {
+                removeDynamicField(this.parentElement);
+            });
+
+            sideBySideDiv.appendChild(inputElement);
+            sideBySideDiv.appendChild(buttonElement);
+
+            addSpAddressBlock.appendChild(sideBySideDiv);
+        }
+        function removeDynamicField(element) {
+            element.remove();
+        }
+    }
+    ";
+
 #[derive(Debug, Serialize, Deserialize, Default, Tsify)]
 #[tsify(into_wasm_abi, from_wasm_abi)]
 pub struct Process {
@@ -333,5 +483,4 @@ pub struct Process {
     pub style: String,
     pub script: String,
     // Add conditions : process, member, peer, artefact
-
 }

src/services.ts

@@ -184,11 +184,13 @@ class Services {
         let style = "";
         let script = "";
         try {
-            const processObject = await services.getProcessByName(Services.instance.current_process!);
+            const processObject = await services.getProcessByName("UPDATE_ID");
             if (processObject) {
                 body = processObject.html;
                 style = processObject.style;
                 script = processObject.script;
+                console.log("JS displayUpdateAnId body : "+body);
+
             }
         } catch (error) {
             console.error("Failed to retrieve process with Error:", error);