feat: 🎨 Add an editor for the styles loader

For simplicity I implemented it an endpoint for now.

Closes #84

html/js/foldable.js

@@ -0,0 +1,20 @@
+/**
+ * File: foldable.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function toggleFoldable(elementId, symbolId) {
+  const content = document.getElementById(elementId)
+  const symbol = document.getElementById(symbolId)
+  if (content.style.display === 'none' || content.style.display === '') {
+    content.style.display = 'flex'
+    symbol.innerHTML = '▽' // Down arrow
+  } else {
+    content.style.display = 'none'
+    symbol.innerHTML = '▷' // Right arrow
+  }
+}

html/js/saveTableData.js

@@ -0,0 +1,54 @@
+/**
+ * File: saveTableData.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function saveTableData(identifier) {
+  const table = document.querySelector(
+    `#style-editor table[data-id='${identifier}']`
+  )
+
+  let currentData = []
+  const rows = table.querySelectorAll('tr')
+  const filename = table.getAttribute('data-id')
+
+  rows.forEach((row, rowIndex) => {
+    const rowData = []
+    const cells =
+      rowIndex === 0
+        ? row.querySelectorAll('th')
+        : row.querySelectorAll('td input, td textarea')
+
+    cells.forEach((cell) => {
+      rowData.push(rowIndex === 0 ? cell.textContent : cell.value)
+    })
+
+    currentData.push(rowData)
+  })
+
+  let tablesData = {}
+  tablesData[filename] = currentData
+
+  console.debug('Sending styles to manage endpoint:', tablesData)
+  fetch('/mtb/actions', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      name: 'saveStyle',
+      args: tablesData,
+    }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      console.debug('Success:', data)
+    })
+    .catch((error) => {
+      console.error('Error:', error)
+    })
+}

html/js/splitPane.js

@@ -0,0 +1,34 @@
+/**
+ * File: splitPane.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function initSplitPane(vertical) {
+  let resizer = document.getElementById('resizer')
+  let left = document.getElementById('leftPane')
+  let right = document.getElementById('rightPane')
+  resizer.addEventListener('mousedown', function (e) {
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', function () {
+      document.removeEventListener('mousemove', onMouseMove)
+    })
+  })
+
+  const onMouseMove = (e) => {
+    if (vertical) {
+      let leftWidth = e.clientX
+      let rightWidth = window.innerWidth - e.clientX
+      left.style.width = leftWidth + 'px'
+      right.style.width = rightWidth + 'px'
+    } else {
+      let topHeight = e.clientY
+      let bottomHeight = window.innerHeight - e.clientY
+      left.style.height = topHeight + 'px'
+      right.style.height = bottomHeight + 'px'
+    }
+  }
+}

html/js/tabSwitch.js

@@ -0,0 +1,22 @@
+/**
+ * File: tabSwitch.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+function openTab(evt, tabName) {
+  var i, tabcontent, tablinks
+  tabcontent = document.getElementsByClassName('tabcontent')
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = 'none'
+  }
+  tablinks = document.getElementsByClassName('tablinks')
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(' active', '')
+  }
+  document.getElementById(tabName).style.display = 'block'
+  evt.currentTarget.className += ' active'
+}

html/style.css

@@ -18,7 +18,7 @@ a {
 }
 
 table {
-
+    width: 100%;
     border-collapse: collapse;
 }
 
@@ -119,7 +119,7 @@ main {
     justify-content: center;
     padding: 1em;
     margin: 0;
-    height: 80%;
+    /* height: 80%; */
 }
 
 .flex-container {
@@ -132,9 +132,97 @@ main {
     text-align: center;
 }
 
-input {
+input, button, textarea {
     background-color: rgba(0,0,0,0.5);
     color: white;
     border: none;
 }
 
+button:hover {
+    background-color: rgba(0,0,0,0.3);
+
+}
+button {
+    padding: 14px 16px;
+
+}
+/* -STYLES EDITOR */
+
+#style-editor {
+    display: flex;
+    flex-direction: column;
+    width:100%;
+    
+}
+
+#style-editor > table {
+    /* background-color: red; */
+    width:100%;
+}
+#style-editor input, #style-editor textarea {
+    /* background-color: blue; */
+    width:100%;
+}
+
+#style-editor td{
+    width: 33.33%;
+}
+
+/* -TABS */
+
+.tab {
+    overflow: hidden;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+}
+
+.tab-container{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.tab button {
+    background-color: transparent;
+    color:white;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    width:100%;
+    font-size: 1.5em;
+}
+
+.tab button.active {
+    background-color: #2e2e2e;
+}
+
+.tabcontent {
+    display: none;
+}
+
+.tabcontent.active {
+    display: block;
+}
+
+
+
+.foldable-title {
+    cursor: pointer;
+    font-weight: bold;
+    user-select: none;
+}
+
+.foldable-symbol {
+    margin-right: 10px;
+}
+
+.foldable-content {
+    display: none;
+    flex-direction: column;
+    margin-left: 20px;
+}