config service url

freistli · Apr 29, 2024 · 2c38024 · 2c38024
1 parent 3352cc4
commit 2c38024
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git a/src/taskpane/taskpane.css b/src/taskpane/taskpane.css
@@ -85,4 +85,13 @@ b {
     flex: 1 0 0;
     width: 90%;
     height: 230px;
-    }
+    }
+
+#iframe-src{
+    margin-bottom: 8px; 
+    margin-left: 8px;
+    width: 80%;
+} 
+#update-iframe-src {
+    margin-left: 8px;
+}
diff --git a/src/taskpane/taskpane.html b/src/taskpane/taskpane.html
@@ -9,10 +9,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Contoso Task Pane Add-in</title>
-    <script
-    src="https://code.jquery.com/jquery-3.7.1.min.js"
-    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
-    crossorigin="anonymous"></script>
+
     <!-- Office JavaScript API -->
     <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
 
@@ -55,9 +52,15 @@ <h2 class="ms-font-xl">Please <a target="_blank"
         <p><textarea id="item-proofread" class="ms-font-m"></textarea></p>
     </div>
     <div>
-        <!--iframe id="proofreading-iframe" src="https://true-repeatedly-cockatoo.ngrok-free.app/"  style="width: 100%; height: 1000px;"></iframe-->
-        <iframe id="proofreading-iframe" src="https://proofreadhub.azurewebsites.net/proofreadaddin/" style="width: 100%; height: 1000px;"></iframe>
+        <input type="text" id="iframe-src" name="iframe-src" placeholder="Proofread Service URL">
+        <button id="update-iframe-src" class="ms-Button ms-Button--primary">
+            <span class="ms-Button-label">Connect</span> 
+        </button>
     </div>
+    <div>
+        <iframe id="proofreading-iframe" src="" style="width: 100%; height: 1000px;"></iframe>
+    </div>
+
 </body>
 
 </html>
diff --git a/src/taskpane/taskpane.js b/src/taskpane/taskpane.js
@@ -7,12 +7,56 @@
 
 import { client } from "@gradio/client";
 
+function setInLocalStorage(key, value) {
+  const myPartitionKey = Office.context.partitionKey;
+
+  // Check if local storage is partitioned. 
+  // If so, use the partition to ensure the data is only accessible by your add-in.
+  if (myPartitionKey) {
+    localStorage.setItem(myPartitionKey + key, value);
+  } else {
+    localStorage.setItem(key, value);
+  }
+}
+
+function getFromLocalStorage(key) {
+  const myPartitionKey = Office.context.partitionKey;
+
+  // Check if local storage is partitioned.
+  if (myPartitionKey) {
+    return localStorage.getItem(myPartitionKey + key);
+  } else {
+    return localStorage.getItem(key);
+  }
+}
+
+
+export async function updateIframeSrc() {
+    const iframeSrcInput = document.getElementById('iframe-src');
+    const iframe = document.getElementById('proofreading-iframe');
+    iframe.src = iframeSrcInput.value+"/proofreadaddin/";
+    setInLocalStorage("serviceUrl",iframeSrcInput.value); 
+    console.log("Save Service URL:" + iframeSrcInput.value);
+}
+
+
 Office.onReady((info) => {
   if (info.host === Office.HostType.Word) {
+
     document.getElementById("sideload-msg").style.display = "none";
     document.getElementById("app-body").style.display = "flex";
     document.getElementById("run").onclick = run;
     document.getElementById("Proofreading").onclick = proofreading;
+    document.getElementById("update-iframe-src").onclick = updateIframeSrc;
+
+    const serviceUrl = getFromLocalStorage("serviceUrl");
+
+    console.log("Get Stored Service URL:" + serviceUrl);
+
+    if (serviceUrl) {
+      document.getElementById("iframe-src").value = serviceUrl;
+      updateIframeSrc();
+    }
 
     window.addEventListener('message', event => {
       console.log("gradio posted message arrived");