path: root/pages/contacts.inc

<?php

require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/init.inc"; global $title; global $isLoggedIn; global $lang; global $pages;
require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/util/timezones.inc'; global $timezones;
require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/util/random.inc';
require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/util/functions.inc';

$methods = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/contactmethods.json"), true);
$contacts = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/addressbook/contacts.json"), true);

if (isset($_POST["edit"])) {
    header("Content-Type: text/plain");
    $id = $_POST["edit"];
    unset($_POST["edit"]);

    if (trim($id) === "" || !isset($contacts[$id])) $id = random();

    foreach ($_POST as $key => $value) {
        if (trim($value) === "") $_POST[$key] = null;
        if (isset($_POST[$key])) $_POST[$key] = str_replace(">", "&gt;", str_replace("<", "&lt;", str_replace("&", "&amp;", substr($_POST[$key], 0, $key === "description" ? 400 : 100))));
    }

    foreach ($methods as $name => $method) {
        if (isset($_POST[$name]) && isset($method["adapter"])) {
            $_POST[$name] = exec("cd \"$_SERVER[DOCUMENT_ROOT]/includes/external/addressbook\" && node \"$_SERVER[DOCUMENT_ROOT]/includes/external/addressbook/$method[adapter]\" \"$_POST[$name]\"");
        }
    }

    $contacts[$id] = $_POST;
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/addressbook/contacts.json", json_encode($contacts));
    createJob("UpdateContactMethods", [
        "contact" => $id
    ]);

    header("Location: /-/contacts");
    die();
} else if (isset($_GET["delete"])) {
    if (isset($contacts[$_GET["delete"]])) {
        unset($contacts[$_GET["delete"]]);
    }

    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/addressbook/contacts.json", json_encode($contacts));

    header("Location: /-/contacts");
    die();
}

require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/components/header.inc'; global $Parsedown;

$cache = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/addressbook/saved.json"), true);

?>

<script>
    window.contacts = JSON.parse(atob(`<?= base64_encode(json_encode($contacts)) ?>`));
</script>

<br>
<div class="container">
    <div id="page-content">
        <h2>
            <span style="vertical-align: middle;"><?= $pages["contacts"]["name"][$lang["_name"]] ?></span>
            <a onclick="createNew();" class="small btn btn-outline-light" style="float:right;margin-top:5px;vertical-align:middle;opacity:1 !important; color:white;">Create</a>
        </h2>

        <?php foreach ($contacts as $id => $contact): ?>
        <div class="contact-item" style="display: grid; grid-template-columns: 1.5fr 1fr;">
            <div>
                <div class="contact-item-main" style="display: grid; grid-template-columns: 1.25fr 1.25fr 0.75fr 0.75fr;">
                    <span><?= $contact["nick"] ?? "" ?></span>
                    <span><?= $contact["name"] ?? "" ?></span>
                    <span><?= isset($contact["birthday"]) ? date('F jS', strtotime($contact["birthday"])) : "" ?></span>
                    <span>
                        <?php if (isset($contact["timezone"])): ?>
                            <span id="timezone-<?= $id ?>">-</span>
                            <script>
                            setTimeout(() => {
                                setInterval(() => {
                                    document.getElementById("timezone-<?= $id ?>").innerText = (new Intl.DateTimeFormat('en-US', {
                                        timeZone: '<?= $contact["timezone"] ?>',
                                        hour: '2-digit',
                                        minute: '2-digit',
                                        second: '2-digit',
                                        hour12: false
                                    })).format(new Date());
                                }, 1000)
                            }, <?= rand(0, 600) ?>);
                        </script>
                        <?php endif; ?>
                    </span>
                </div>
                <div class="text-muted" style="margin-top: 10px;"><?= $Parsedown->text($contact["description"]) ?></div>
            </div>
            <div style="display: grid; grid-template-columns: 3fr max-content;">
                <span>
                    <?php foreach ($methods as $name => $method): if (isset($contact[$name]) && isset($cache[$name][$contact[$name]])): $data = $cache[$name][$contact[$name]]["data"]; ?>
                        <div class="contact-method" style="display: grid; grid-template-columns: 32px 1fr; grid-gap: 10px; width: max-content;">
                        <div style="display: flex; align-items: center; justify-content: center;">
                            <?php if (isset($data["link"])): ?><a style="color: inherit; text-decoration: none;" href="<?= $data["link"] ?>" target="_blank"><?php endif; ?><img alt="<?= $name ?>" style="width: 32px;" src="<?= $data["avatar"] ?>"><?php if (isset($data["link"])): ?></a><?php endif; ?>
                        </div>
                        <div style="display: grid; grid-template-columns: 1fr max-content; grid-gap: 10px;">
                            <div>
                                <div class="<?= isset($data["error"]) ? "text-danger" : "" ?>"><?php if (isset($data["link"])): ?><a style="color: inherit; text-decoration: none;" href="<?= $data["link"] ?>" target="_blank"><?php endif; ?><b><?= $data["name"] ?></b><?php if (isset($data["link"])): ?></a><?php endif; ?></div>
                                <div class="text-muted"><?php if (isset($data["link"])): ?><a style="color: inherit; text-decoration: none;" href="<?= $data["link"] ?>" target="_blank"><?php endif; ?><?= $data["description"] ?><?php if (isset($data["link"])): ?></a><?php endif; ?></div>
                            </div>
                            <div style="display: flex; align-items: end;">
                                <div class="dropdown">
                                    <a data-bs-toggle="dropdown" style="text-decoration: underline; cursor: pointer;">...</a>
                                    <ul class="dropdown-menu">
                                        <?php foreach ($data["copy"] as $action): ?>
                                            <li><a style="cursor: pointer;" class="dropdown-item" onclick="copyToClipboard('<?= base64_encode($action["text"]) ?>');"><?= $action["title"] ?></a></li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endif; endforeach; ?>
                </span>
                    <span>
                    <a onclick="editContact('<?= $id ?>')" style="text-decoration: underline; cursor: pointer;">E</a>, <a onclick="deleteContact('<?= $id ?>')" style="text-decoration: underline; cursor: pointer;">D</a>
                </span>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<div class="modal fade" id="create-edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="create-edit-title">Creating a new contact</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form id="create-edit-form" method="post">
                    <input type="hidden" id="create-edit-id" name="edit" value="">
                    <input type="text" placeholder="Nickname" name="nick" class="form-control" style="margin-bottom:15px;color:white;background:#111;border-color:#222;" required>
                    <input type="text" placeholder="Real name" name="name" class="form-control" style="margin-bottom:15px;color:white;background:#111;border-color:#222;">
                    <input type="date" placeholder="Birthday" name="birthday" class="form-control" style="margin-bottom:15px;color:white;background:#111;border-color:#222;">
                    <textarea name="description" rows="3" placeholder="Description" class="form-control" style="resize: none;color:white;background:#111;border-color:#222;margin-bottom:10px;"></textarea>
                    <select name="timezone" class="form-select" style='display:inline-block;filter:invert(1) hue-rotate(180deg);background-image:url("data:image/svg+xml,%3csvg xmlns=&apos;http://www.w3.org/2000/svg&apos; viewBox=&apos;0 0 16 16&apos;%3e%3cpath fill=&apos;none&apos; stroke=&apos;%23000000&apos; stroke-linecap=&apos;round&apos; stroke-linejoin=&apos;round&apos; stroke-width=&apos;2&apos; d=&apos;M2 5l6 6 6-6&apos;/%3e%3c/svg%3e");'>
                        <option value="">Timezone</option>
                        <option disabled>———————————————</option>
                        <?php foreach ($timezones as $timezone => $tz): ?>
                        <option value="<?= $tz ?>"><?= $timezone ?></option>
                        <?php endforeach; ?>
                    </select>

                    <hr>

                    <div style="display: grid; grid-template-columns: max-content 1fr; grid-gap: 10px;">
                        <?php foreach ($methods as $name => $method): ?>
                        <div style="justify-content: right; display: flex; align-items: center;"><?= $method["name"] ?>:</div>
                        <div>
                            <input type="text" placeholder="<?= $method["name"] ?>" name="<?= $name ?>" class="form-control" style="color:white;background:#111;border-color:#222;">
                        </div>
                        <?php endforeach; ?>
                    </div>

                    <hr>

                    <button class="btn btn-primary" id="create-edit-submit" type="submit">Create</button>
                    <button id="create-edit-reset" style="display: none;" type="reset"></button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delete">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="delete-title">Delete "<span id="delete-title-name">X</span>"?</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <p>Are you really sure you want to delete "<span id="delete-description-name">X</span>"? This cannot be undone and will delete all data associated with this contact.</p>
                <a href="" id="delete-link" class="btn btn-primary">Delete</a>
                <a data-bs-dismiss="modal" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </div>
</div>

<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);
    }

    .contact-item > * {
        padding: 5px 10px;
    }

    .contact-item {
        background-color: #111;
        border-radius: 5px;
        margin: 10px 0;
        padding: 5px;
    }

    .contact-method {
        background-color: #222;
        border-radius: 5px;
        padding: 5px;
        margin: 5px 0;
    }

    @media (max-width: 991px) {
        .contact-item, .contact-item-main {
            grid-template-columns: 1fr !important;
        }

        .contact-item > * {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }
</style>

<script>
    function createNew() {
        document.getElementById("create-edit-title").innerText = "Create a new contact";
        document.getElementById("create-edit-submit").innerText = "Create";
        document.getElementById("create-edit-id").value = "";
        document.getElementById("create-edit-reset").click();

        new bootstrap.Modal(document.getElementById("create-edit")).show();
    }

    function editContact(id) {
        document.getElementById("create-edit-title").innerText = "Edit an existing contact";
        document.getElementById("create-edit-submit").innerText = "Save";
        document.getElementById("create-edit-id").value = id;
        document.getElementById("create-edit-reset").click();

        for (let key of Object.keys(window.contacts[id])) {
            document.getElementsByName(key)[0].value = window.contacts[id][key] ?? "";
        }

        new bootstrap.Modal(document.getElementById("create-edit")).show();
    }

    function deleteContact(id) {
        document.getElementById("delete-title-name").innerText = document.getElementById("delete-description-name").innerText = window.contacts[id]["nick"];
        document.getElementById("delete-link").href = "/-/contacts/?delete=" + id;

        new bootstrap.Modal(document.getElementById("delete")).show();
    }

    function copyToClipboard(b64) {
        navigator.clipboard.writeText(atob(b64));
    }
</script>

<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/components/footer.inc'; ?>