absmach · dborovcanin · Dec 21, 2023 · Dec 7, 2023 · Dec 21, 2023
diff --git a/ui/service.go b/ui/service.go
@@ -74,6 +74,7 @@ var (
 		"tablefooter",
 		"error",
 		"breadcrumb",
+		"metadatamodal",
 
 		"bootstrap",
 		"bootstraps",

diff --git a/ui/web/static/css/styles.css b/ui/web/static/css/styles.css
@@ -2,6 +2,8 @@
 SPDX-License-Identifier: Apache-2.0 */
 
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@400&family=Montserrat:wght@700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
+
 
 :root {
 	--main-color: #003366;
@@ -15,6 +17,8 @@ SPDX-License-Identifier: Apache-2.0 */
 	--pill-color-1: #1d2231;
 	--pill-color-2: #003366;
 	--pill-color-3: #8390a2;
+
+	--codemirror-font: 'Inconsolata', monospace;
 }
 
 * {
@@ -220,12 +224,11 @@ body.sidebar-toggled .main-content {
 	margin-left: 0.25rem;
 }
 
-.main-content .body-button {
+body .body-button {
 	background: var(--main-color);
 	border-radius: var(--border-radius);
 	color: #fff;
 	font-size: 1rem;
-	padding: 0.5rem 1rem;
 	border: 1px solid var(--main-color);
 	margin-bottom: 0.5rem;
 }
@@ -237,7 +240,7 @@ body.sidebar-toggled .main-content {
 }
 
 .main-content .sendMessage-button:hover,
-.main-content .body-button:hover {
+body .body-button:hover {
 	color: #fff;
 	background: var(--main-color);
 	transform: scale(1.03);
@@ -537,7 +540,6 @@ button.edit-btn {
 	border-radius: var(--border-radius);
 	color: #fff;
 	font-size: 1rem;
-	padding: 0.5rem 1rem;
 	border: 1px solid var(--main-color);
 }
 
@@ -585,6 +587,44 @@ button.edit-btn {
 	font-size: 1.25rem;
 }
 
+.string,
+.cm-s-default .cm-string {
+	color: var(--main-color);
+}
+
+.key,
+.cm-property {
+	color: red !important;
+}
+
+.number,
+.cm-s-default .cm-number {
+	color: darkorange;
+}
+
+.boolean,
+.cm-s-default .cm-atom {
+	color: green;
+}
+
+.null {
+	color: magenta;
+}
+
+.table-container .meta-div {
+	overflow: auto;
+	max-height: 5rem;
+	max-width: 100%;
+}
+
+.table-container .meta-col {
+	max-width: 50%;
+}
+
+.metadata-field span {
+	font-family: var(--codemirror-font) !important;
+}
+
 @media (max-width: 768px) {
 	.sidebar {
 		width: var(--sidebar-min);

diff --git a/ui/web/static/js/formatjson.js b/ui/web/static/js/formatjson.js
@@ -0,0 +1,49 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+function syntaxHighlight(json) {
+  json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return json.replace(
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+    function (match) {
+      var cls = "number";
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = "key";
+        } else {
+          cls = "string";
+        }
+      } else if (/true|false/.test(match)) {
+        cls = "boolean";
+      } else if (/null/.test(match)) {
+        cls = "null";
+      }
+      return '<span class="' + cls + '">' + match + "</span>";
+    },
+  );
+}
+
+function attachFormatJsonWithPrettifyListener(config) {
+  document.addEventListener("DOMContentLoaded", function () {
+    var meta = JSON.parse(config.metadata);
+    document.getElementById(config.id).innerHTML = syntaxHighlight(JSON.stringify(meta, null, 2));
+  });
+}
+
+function codeMirrorEditor(config) {
+  var editor = CodeMirror.fromTextArea(document.getElementById(config.textArea), {
+    mode: "application/json",
+    matchBrackets: true,
+    autoCloseBrackets: true,
+    lineWrapping: true,
+    lineNumbers: true,
+    lint: true,
+    gutters: ["CodeMirror-lint-markers"],
+    autoRefresh: true,
+  });
+  editor.setValue(JSON.stringify(config.value, null, 2));
+  editor.setSize("100%", 200);
+  document.getElementById(config.button).addEventListener("click", function () {
+    document.getElementById(config.textArea).value = editor.getValue();
+  });
+}
diff --git a/ui/web/static/js/update.js b/ui/web/static/js/update.js
@@ -50,9 +50,9 @@ function updateIdentity(config) {
 
 function updateMetadata(config) {
   const button = document.getElementById(config.button);
-
   button.addEventListener("click", function (event) {
-    const updatedValue = config.cell.textContent.trim();
+    event.preventDefault();
+    const updatedValue = document.getElementById(config.textArea).value;
     if (validateJSON(updatedValue, config.alertDiv, config.fieldName, event)) {
       const url = `/${config.entity}/${config.id}`;
       const data = { [config.field]: JSON.parse(updatedValue) };

diff --git a/ui/web/template/channel.html b/ui/web/template/channel.html
@@ -97,25 +97,21 @@
                       </tr>
                       <tr>
                         <th>Metadata</th>
-                        <td
-                          class="editable metadata-field"
-                          contenteditable="false"
-                          data-field="metadata"
-                        >
-                          {{ toJSON .Channel.Metadata }}
+                        <td>
+                          <div>
+                            <pre id="meta-data"></pre>
+                          </div>
                         </td>
                         <td>
                           <button
+                            type="button"
                             class="edit-btn"
-                            id="edit-metadata"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editMetadataModal"
                             {{ if not $editButton }}disabled{{ end }}
                           >
                             <i class="fas fa-pencil-alt"></i>
                           </button>
-                          <div class="save-cancel-buttons" style="display: none">
-                            <button class="save-btn" id="save-metadata">Save</button>
-                            <button class="cancel-btn" id="cancel-metadata">Cancel</button>
-                          </div>
                         </td>
                       </tr>
                     </tbody>
@@ -144,6 +140,21 @@
           </div>
         </div>
       </div>
+      <script>
+        var metadata = "{{ toJSON .Channel.Metadata }}";
+        var parsedMetadata = JSON.parse(metadata);
+
+        attachFormatJsonWithPrettifyListener({
+          id: "meta-data",
+          metadata: metadata,
+        });
+
+        codeMirrorEditor({
+          textArea: "metadataTextArea",
+          button: "save-metadata",
+          value: parsedMetadata,
+        });
+      </script>      
       <script type="module">
         import { attachEditRowListener, updateName, updateDescription, updateMetadata} from "/js/update.js";
 
@@ -154,14 +165,21 @@
           rows: {
             name:updateName,
             description: updateDescription,
-            metadata:updateMetadata,
           },
           errorDiv: "error-message",
           fields:{
             name: "name-field",
-            metadata: "metadata-field",
           },
         });
+        updateMetadata({
+          textArea: "metadataTextArea",
+          field:"metadata",
+          alertDiv: "metadataError",
+          fieldName: "metadata-field",
+          id: "{{ .Channel.ID }}",
+          entity: "channels",
+          button: "save-metadata",
+        });
       </script>
     </body>
   </html>

diff --git a/ui/web/template/channels.html b/ui/web/template/channels.html
@@ -80,13 +80,9 @@ <h5 class="modal-title" id="addChannelModalLabel">Add Channel</h5>
                             </div>
                             <div class="mb-3">
                               <label for="metadata" class="form-label">Metadata</label>
-                              <input
-                                type="text"
-                                class="form-control metadata-field"
-                                name="metadata"
-                                id="metadata"
-                                value="{}"
-                              />
+                              <div class="metadata-field">
+                                <textarea name="metadata" id="metadata"></textarea>
+                              </div>
                               <div id="metadataHelp" class="form-text">
                                 Enter channel metadata in JSON format.
                               </div>
@@ -176,15 +172,18 @@ <h5 class="modal-title" id="addChannelsModalLabel">Add Channels</h5>
                             <td>{{ $c.Name }}</td>
                             <td class="desc-col">{{ $c.Description }}</td>
                             <td class="meta-col">
-                              {{ range $k, $v := $c.Metadata }}
-                                <span class="badge bg-success">
-                                  {{ $k }}:
-                                  {{ $v }}
-                                </span>
-                              {{ end }}
+                              <div class="meta-div">
+                                <pre id="meta-{{ $i }}"></pre>
+                              </div>
                             </td>
                             <td class="created-col">{{ $c.CreatedAt }}</td>
                           </tr>
+                          <script>
+                            attachFormatJsonWithPrettifyListener({
+                              metadata: '{{ toJSON $c.Metadata }}',
+                              id: "meta-{{ $i }}",
+                            })
+                          </script>
                         {{ end }}
                       </tbody>
                     </table>
@@ -207,6 +206,12 @@ <h5 class="modal-title" id="addChannelsModalLabel">Add Channels</h5>
             channelsModal.show();
           }
         }
+
+        codeMirrorEditor({
+          textArea: "metadata",
+          button: "create-channel-button",
+          value: {},
+        });
       </script>
       <script type="module">
         import { attachValidationListener, validateName, validateJSON } from "/js/validation.js";