From 108525534c28013cfe1897c30e4565f9893f3766 Mon Sep 17 00:00:00 2001
From: Minteck <contact@minteck.org>
Date: Mon, 10 Oct 2022 20:51:39 +0200
Subject: Update

---
 includes/subsysedit.inc | 143 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 includes/subsysedit.inc

(limited to 'includes/subsysedit.inc')

diff --git a/includes/subsysedit.inc b/includes/subsysedit.inc
new file mode 100644
index 0000000..e9c4b4c
--- /dev/null
+++ b/includes/subsysedit.inc
@@ -0,0 +1,143 @@
+<?php global $system; global $systemCommonName; global $systemID; global $subsystem; global $subsystemData; global $subsystemCommonName; global $subsystemID; $title = "Editing " . $subsystemCommonName . " · " . $systemCommonName; require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.inc';
+
+?>
+
+<br>
+<div class="container">
+    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/subsysbanner.inc"; ?>
+    <br>
+
+    <p class="text-muted">
+        <span id="editor-save-status">Saved</span> · <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/$systemID-$subsystemID.html") ? strlen(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-subsystem-$subsystemID.html")) : "0" ?></span> bytes
+    </p>
+
+    <!--suppress HtmlFormInputWithoutLabel -->
+    <textarea id="page-editor">
+        <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/$systemID-$subsystemID.html") ? file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-subsystem-$subsystemID.html") : "" ?>
+    </textarea>
+
+    <script src="/assets/editor/editor.js"></script>
+    <script>
+        let editor;
+        ClassicEditor
+            .create( document.querySelector( '#page-editor' ), {
+                toolbar: [
+                    'undo', 'redo', '|', 'removeFormat', '|', 'heading', '|', 'fontSize', 'fontColor', 'fontBackgroundColor', 'alignment', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'code', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'link', 'imageUpload', 'mediaEmbed', 'blockQuote', 'insertTable', 'codeBlock', '|', 'horizontalLine'
+                ]
+            } )
+
+            .then( newEditor => {
+                editor = newEditor;
+            } )
+            .catch( error => {
+                console.error( error );
+            } );
+    </script>
+    <style>
+        :root {
+            --ck-color-base-background: transparent;
+        }
+
+        .ck-toolbar {
+            filter: invert(1);
+        }
+
+        .ck-tooltip__text {
+            color: white !important;
+        }
+
+        .ck-dropdown__panel {
+            background: #ddd !important;
+        }
+
+        .ck-color-grid__tile {
+            filter: invert(1);
+        }
+
+        .ck-balloon-rotator {
+            background-color: #ccc !important;
+        }
+
+        .ck-balloon-panel {
+            filter: invert(1);
+        }
+    </style>
+    <script>
+        let lastSavedData = editor.getData();
+        let lastFetchedData = editor.getData();
+        let timeSinceLastModified = 0;
+        let saving = false;
+
+        async function save() {
+            let data = editor.getData();
+            document.getElementById("editor-save-status").innerHTML = "Saving...";
+            document.getElementById("editor-save-status").classList.remove("text-danger");
+            document.getElementById("editor-save-status").classList.remove("text-muted");
+            document.getElementById("editor-save-status").classList.remove("text-warning");
+            document.getElementById("editor-save-status").classList.add("text-primary");
+            saving = true;
+
+            try {
+                await window.fetch("/api/save?system=<?= $systemID ?>&subsystem=<?= $subsystemID ?>", {
+                    method: "POST",
+                    body: JSON.stringify({ content: data })
+                });
+                document.getElementById("editor-save-status").innerHTML = "Saved";
+                document.getElementById("editor-save-status").classList.remove("text-danger");
+                document.getElementById("editor-save-status").classList.add("text-muted");
+                document.getElementById("editor-save-status").classList.remove("text-warning");
+                document.getElementById("editor-save-status").classList.remove("text-primary");
+                lastSavedData = data;
+                saving = false;
+            } catch (e) {
+                console.error(e);
+                document.getElementById("editor-save-status").innerHTML = "Failed to save";
+                document.getElementById("editor-save-status").classList.add("text-danger");
+                document.getElementById("editor-save-status").classList.remove("text-muted");
+                document.getElementById("editor-save-status").classList.remove("text-warning");
+                document.getElementById("editor-save-status").classList.remove("text-primary");
+            }
+        }
+
+        document.onclick = async () => {
+            if (saving) return;
+
+            if (editor.getData() !== lastSavedData) {
+                await save();
+            }
+        }
+
+        setInterval(async () => {
+            if (saving) return;
+
+            document.getElementById("editor-size").innerHTML = editor.getData().length;
+
+            if (editor.getData() !== lastSavedData) {
+                document.getElementById("editor-save-status").innerHTML = "Modified";
+                document.getElementById("editor-save-status").classList.remove("text-danger");
+                document.getElementById("editor-save-status").classList.remove("text-muted");
+                document.getElementById("editor-save-status").classList.add("text-warning");
+                document.getElementById("editor-save-status").classList.remove("text-primary");
+
+                if (editor.getData() !== lastFetchedData) {
+                    lastFetchedData = editor.getData();
+                    timeSinceLastModified = 0;
+                } else {
+                    timeSinceLastModified++;
+                }
+
+                if (timeSinceLastModified > 20) {
+                    await save();
+                }
+            } else {
+                timeSinceLastModified = 0;
+                document.getElementById("editor-save-status").innerHTML = "Saved";
+                document.getElementById("editor-save-status").classList.add("text-muted");
+                document.getElementById("editor-save-status").classList.remove("text-warning");
+                document.getElementById("editor-save-status").classList.remove("text-primary");
+            }
+        }, 100)
+    </script>
+</div>
+
+<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.inc'; ?>
\ No newline at end of file
-- 
cgit