feat: add edit of notice box content to admin settings

web/frontend/src/Config.root.svelte

@@ -15,6 +15,7 @@
   export let isAdmin;
   export let isApi;
   export let username;
+  export let ncontent;
 </script>
 
 {#if isAdmin == true}
@@ -22,7 +23,7 @@
     <CardHeader>
       <CardTitle class="mb-1">Admin Options</CardTitle>
     </CardHeader>
-    <AdminSettings />
+    <AdminSettings {ncontent}/>
   </Card>
 {/if}
 

web/frontend/src/config.entrypoint.js

@@ -6,7 +6,8 @@ new Config({
     props: {
         isAdmin: isAdmin,
         isApi: isApi,
-        username: username
+        username: username,
+        ncontent: ncontent,
     },
     context: new Map([
             ['cc-config', clusterCockpitConfig],

web/frontend/src/config/AdminSettings.svelte

@@ -10,6 +10,9 @@
   import AddUser from "./admin/AddUser.svelte";
   import ShowUsers from "./admin/ShowUsers.svelte";
   import Options from "./admin/Options.svelte";
+  import NoticeEdit from "./admin/NoticeEdit.svelte";
+
+  export let ncontent;
 
   let users = [];
   let roles = [];
@@ -52,4 +55,5 @@
     <EditProject on:reload={getUserList} />
   </Col>
   <Options />
+  <NoticeEdit {ncontent}/>
 </Row>

web/frontend/src/config/admin/NoticeEdit.svelte

@@ -0,0 +1,78 @@
+<!--
+    @component Admin edit notice.txt content card
+ -->
+
+<script>
+  import { Col, Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
+  import { fade } from "svelte/transition";
+
+  export let ncontent;
+
+  let message = { msg: "", color: "#d63384" };
+  let displayMessage = false;
+
+  async function handleEditNotice() {
+    const content = document.querySelector("#notice-content").value;
+
+    let formData = new FormData();
+    formData.append("new-content", content);
+
+    try {
+      const res = await fetch(`/config/notice/`, {
+        method: "POST",
+        body: formData,
+      });
+      if (res.ok) {
+        let text = await res.text();
+        popMessage(text, "#048109");
+      } else {
+        let text = await res.text();
+        throw new Error("Response Code " + res.status + "-> " + text);
+      }
+    } catch (err) {
+      popMessage(err, "#d63384");
+    }
+  }
+
+  function popMessage(response, rescolor) {
+    message = { msg: response, color: rescolor };
+    displayMessage = true;
+    setTimeout(function () {
+      displayMessage = false;
+    }, 3500);
+  }
+</script>
+
+<Col>
+  <Card class="h-100">
+    <CardBody>
+      <CardTitle class="mb-3">Edit Notice Shown On Homepage</CardTitle>
+      <p>Empty content ("No Content.") hides notice card on homepage.</p>
+      <div class="input-group mb-3">
+        <input
+          type="text"
+          class="form-control"
+          placeholder="No Content."
+          value={ncontent}
+          id="notice-content"
+        />
+
+        <!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
+        <!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
+        <button
+          class="btn btn-primary"
+          type="button"
+          id="edit-notice-button"
+          on:click|preventDefault={handleEditNotice}>Edit Notice</button
+        >
+      </div>
+      <p>
+        {#if displayMessage}<b
+            ><code style="color: {message.color};" out:fade
+              >Update: {message.msg}</code
+            ></b
+          >{/if}
+      </p>
+    </CardBody>
+  </Card>
+</Col>

web/templates/config.tmpl

@@ -13,6 +13,7 @@
         const filterPresets = {{ .FilterPresets }};
         const clusterCockpitConfig = {{ .Config }};
         const resampleConfig = {{ .Resampling }};
+        const ncontent = {{ .Infos.ncontent }};
     </script>
     <script src='/build/config.js'></script>
 {{end}}