Updated 5 files and deleted 2 files (automated)

1 files changed, 204 insertions, 24 deletions

diff --git a/includes/fragments/metadata.inc b/includes/fragments/metadata.inc
index 0d2187c..719abbc 100644
--- a/includes/fragments/metadata.inc
+++ b/includes/fragments/metadata.inc
@@ -6,9 +6,51 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/metadata/" . $member
 
 ?>
 
+<style>
+    .modal-header {
+        border-bottom: 1px solid #353738;
+    }
+
+    .modal-content {
+        border: 1px solid rgba(255, 255, 255, .2);
+        background-color: #111;
+    }
+
+    .btn-close {
+        filter: invert(1);
+    }
+
+    .list-group-item {
+        color: #fff;
+        background-color: #222;
+        border: 1px solid rgba(255, 255, 255, .125);
+    }
+
+    .list-group-item.disabled {
+        color: #fff;
+        background-color: #222;
+        border-color: rgba(255, 255, 255, .125);
+        opacity: .75;
+    }
+
+    .list-group-item:hover {
+        background-color: #252525;
+        color: #ddd;
+    }
+
+    .list-group-item:active, .list-group-item:focus {
+        background-color: #272727;
+        color: #bbb;
+    }
+
+    .member-link, .list-group-item-action {
+        cursor: pointer !important;
+    }
+</style>
+
 <br>
-<div class="container" id="page-content">
-    <h2><a href="/<?= $memberData["name"] ?>"><?= $memberData["display_name"] ?? $memberData["name"] ?></a></h2>
+<div class="container">
+    <h2 id="page-content"><a href="/<?= $memberData["name"] ?>"><?= $memberData["display_name"] ?? $memberData["name"] ?></a></h2>
     <?php if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/metadata/" . $memberID . ".json")): ?>
     <form>
         <input name="submit" type="hidden">
@@ -94,28 +136,166 @@ if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/metadata/" . $member
 
         <h3>Relationships</h3>
 
-        <?php if ($systemID !== $app["other"]["id"]): ?>
-        <p>
-            <b>Sexfriends (full IDs, comma-separated)</b><br>
-            <input name="sexfriends" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= implode(", ", $metadata["sexfriends"]) ?>">
-        </p>
-        <?php endif; ?>
-        <p>
-            <b>Marefriends (full IDs, comma-separated)</b><br>
-            <input name="marefriends" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= implode(", ", $metadata["marefriends"]) ?>">
-        </p>
-        <p>
-            <b>Sisters (full IDs, comma-separated)</b><br>
-            <input name="sisters" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= implode(", ", $metadata["sisters"]) ?>">
-        </p>
-        <p>
-            <b>Caretakers (full IDs, comma-separated)</b><br>
-            <input name="caretakers" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= implode(", ", $metadata["caretakers"]) ?>">
-        </p>
-        <p>
-            <b>Friends (full IDs, comma-separated)</b><br>
-            <input name="friends" class="form-control" style="filter: invert(1) hue-rotate(180deg);" type="text" value="<?= implode(", ", $metadata["friends"] ?? []) ?>">
-        </p>
+        <div class="modal" id="new-relation" data-bs-backdrop="static" data-bs-keyboard="false">
+            <div class="modal-dialog">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 class="modal-title">Add a new <span id="new-relation-type">-</span> for <?= $memberData["display_name"] ?? $memberData["name"] ?></h4>
+                        <button id="new-fronter-close" type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+
+                    <div class="modal-body">
+                        <input type="text" placeholder="Search for a pony..." class="form-control" style="margin-bottom:15px;color:white;background:#111;border-color:#222;" id="search">
+
+                        <div id="list">
+                            <div class="list-group">
+                                <?php foreach (scoreOrderGlobal() as $member): ?>
+                                    <a id="list-pony-<?= $member['id'] ?>" onclick="confirmAdd('<?= $member['system'] ?>/<?= $member['id'] ?>');" class="new-fronter-link list-group-item list-group-item-action"><img src="<?= getAsset($member["system"], $member["id"], "heads") ?>" style="width:24px;"> <?= $member["display_name"] ?? $member["name"] ?></a>
+                                <?php endforeach; ?>
+                            </div>
+                        </div>
+
+                        <div id="search-results" class="list-group"></div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <script src="/assets/editor/fuse.js"></script>
+        <script>
+            window.modal = new bootstrap.Modal(document.getElementById("new-relation"));
+            window.currentSelectedValue = null;
+
+            function openAddDialog(value, text) {
+                modal.show();
+                window.currentSelectedValue = value;
+                document.getElementById("new-relation-type").innerText = text;
+                document.getElementById("search").value = ""; search({});
+                document.getElementById("search").focus();
+            }
+
+            window.poniesList = JSON.parse(atob(`<?= base64_encode(json_encode(array_values(scoreOrderGlobal()))) ?>`));
+            window.avatars = JSON.parse(atob(`<?php
+
+            $avatars = [];
+
+            foreach (scoreOrderGlobal() as $pony) {
+                $avatars[$pony["system"] . "/" . $pony["id"]] = getAsset($pony["system"], $pony["id"]);
+            }
+
+            echo(base64_encode(json_encode($avatars))); ?>`))
+
+            const fuse = new Fuse(window.poniesList, {
+                includeScore: true,
+                keys: [
+                    {
+                        name: 'name',
+                        weight: 1
+                    },
+                    {
+                        name: 'display_name',
+                        weight: 1
+                    },
+                    {
+                        name: 'id',
+                        weight: 0.7
+                    },
+                    {
+                        name: 'species',
+                        weight: 0.5
+                    }
+                ]
+            })
+
+            function search(event) {
+                if (event.key === "Enter") {
+                    return;
+                }
+
+                let query = document.getElementById("search").value;
+                let results = fuse.search(query).map((i) => {
+                    return {
+                        id: i.item.id,
+                        score: i.score
+                    };
+                });
+
+                let unfiltered = results;
+
+                results = results.filter((i) => {
+                    return i.score < 0.7;
+                });
+
+                console.log("Before:", unfiltered, "After:", results);
+
+                document.getElementById("list").style.display = "none";
+                document.getElementById("search-results").style.display = "block";
+                document.getElementById("search-results").innerHTML = "";
+
+                for (let result of results) {
+                    if (document.getElementById("list-pony-" + result.id)) document.getElementById("search-results").innerHTML += document.getElementById("list-pony-" + result.id).outerHTML;
+                }
+
+                console.log(results);
+
+                if (query.trim() === "") {
+                    document.getElementById("list").style.display = "block";
+                    document.getElementById("search-results").style.display = "none";
+                }
+            }
+
+            document.getElementById("search").onchange = document.getElementById("search").onkeyup = document.getElementById("search").onkeydown = search;
+
+            document.getElementById("search").addEventListener("keydown", (event) => {
+                if (event.key === "Enter") {
+                    document.querySelector("#search-results .new-fronter-link").click();
+                    event.preventDefault();
+                }
+            });
+
+            function update(type) {
+                document.getElementById(type + "-list").innerHTML = document.getElementsByName(type)[0].value.split(",").map(i => i.trim()).filter(i => i && i.trim() !== "").map(i => `
+                <a style="margin-top: 4px;" class="btn btn-dark" onclick="deleteRelation('${type}', '${i}');">
+                    <img src="${window.avatars[i]}" style="width: 24px; vertical-align: middle; border-radius: 999px;">
+                    <span style="vertical-align: middle; margin-left: 5px;">${window.poniesList.filter(j => j.id === i.split("/")[1])[0]['display_name'] ?? window.poniesList.filter(j => j.id === i.split("/")[1])[0]['name']}</span>
+                </a>
+                `).join("");
+            }
+
+            function confirmAdd(item) {
+                document.getElementsByName(window.currentSelectedValue)[0].value += ", " + item;
+                update(window.currentSelectedValue);
+                window.currentSelectedValue = null;
+                modal.hide();
+            }
+
+            function deleteRelation(type, relation) {
+                let relations = document.getElementsByName(type)[0].value.split(",").map(i => i.trim()).filter(i => i && i !== "");
+                relations = relations.filter(i => i !== relation);
+                document.getElementsByName(type)[0].value = relations.join(", ");
+                update(type);
+            }
+        </script>
+
+        <?php foreach ([
+            $systemID !== $app["other"]["id"] ? [ "sexfriends", "Sexfriends" ] : null,
+            [ "marefriends", "Marefriends", "marefriend" ],
+            [ "sisters", "Sisters", "sister" ],
+            [ "caretakers", "Caretakers", "caretaker" ],
+            [ "friends", "Friends", "friend" ],
+        ] as $relations): if (isset($relations)): ?>
+            <p>
+                <b><?= $relations[1] ?></b><br>
+                <input name="<?= $relations[0] ?>" type="hidden" value="<?= implode(", ", $metadata[$relations[0]] ?? []) ?>">
+                <span id="<?= $relations[0] ?>-list"></span>
+                <a style="margin-top: 4px;" class="btn btn-secondary" onclick="openAddDialog('<?= $relations[0] ?>', '<?= $relations[2] ?>')">+</a>
+                <script>
+                    update('<?= $relations[0] ?>');
+                </script>
+            </p>
+        <?php endif; endforeach; ?>
 
         <hr>