From 0417260bf158c5d7b62888dae2e202b0de115a05 Mon Sep 17 00:00:00 2001
From: Minteck <contact@minteck.org>
Date: Wed, 10 Aug 2022 00:04:25 +0200
Subject: Initial commit

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

(limited to 'includes/subsysedit.php')

diff --git a/includes/subsysedit.php b/includes/subsysedit.php
new file mode 100644
index 0000000..a19683d
--- /dev/null
+++ b/includes/subsysedit.php
@@ -0,0 +1,172 @@
+<?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.php';
+
+function timeAgo($time): string {
+    if (!is_numeric($time)) {
+        $time = strtotime($time);
+    }
+
+    $periods = ["second", "minute", "hour", "day", "week", "month", "year", "age"];
+    $lengths = array("60", "60", "24", "7", "4.35", "12", "100");
+
+    $now = time();
+
+    $difference = $now - $time;
+    if ($difference <= 10 && $difference >= 0) {
+        return $tense = "now";
+    } elseif ($difference > 0) {
+        $tense = "ago";
+    } else {
+        $tense = "later";
+    }
+
+    for ($j = 0; $difference >= $lengths[$j] && $j < count($lengths)-1; $j++) {
+        $difference /= $lengths[$j];
+    }
+
+    $difference = round($difference);
+
+    $period =  $periods[$j] . ($difference >1 ? "s" :'');
+    return "{$difference} {$period} {$tense} ";
+}
+
+?>
+
+<br>
+<div class="container">
+    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/subsysbanner.php"; ?>
+    <br>
+
+    <p class="text-muted">
+        <span id="editor-save-status">Saved</span> · <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-subsystem-$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/$systemID-subsystem-$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.php'; ?>
\ No newline at end of file
-- 
cgit