summaryrefslogtreecommitdiff
path: root/includes/components/timeline.inc
blob: 0ec88702310f71d4251ea9561e2d4b8b9490f82c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?php


function displayTimeline($systems) { global $app; $showIcons = count($systems) > 1; ?>
    <table style="margin-top: 10px; width: 100%; margin-bottom: 10px;table-layout:fixed;">
        <thead>
        <tr class="row-desktop">
            <?php if ($showIcons): ?><th colspan="20"></th><?php endif; ?>
            <th class="dynamic-time" data-time="<?= time() - 3600 * 6 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 6) ?></th>
            <th class="dynamic-time" data-time="<?= time() - 3600 * 5 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 5) ?></th>
            <th class="dynamic-time" data-time="<?= time() - 3600 * 4 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 4) ?></th>
            <th class="dynamic-time" data-time="<?= time() - 3600 * 3 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 3) ?></th>
            <th class="dynamic-time" data-time="<?= time() - 3600 * 2 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 2) ?></th>
            <th class="dynamic-time" data-time="<?= time() - 3600 * 1 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time() - 3600 * 1) ?></th>
            <th class="dynamic-time" data-time="<?= time() ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:i', time()) ?></th>
        </tr>
        <tr class="row-mobile">
            <?php if ($showIcons): ?><th colspan="20"></th><?php endif; ?>
            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 6 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 6) ?></th>
            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 5 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 5) ?></th>
            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 4 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 4) ?></th>
            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 3 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 3) ?></th>
            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 2 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 2) ?></th>
            <th class="dynamic-time-mobile" data-time="<?= time() - 3600 * 1 ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time() - 3600 * 1) ?></th>
            <th class="dynamic-time-mobile" data-time="<?= time() ?>" colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);"><?= date('H:', time()) ?></th>
        </tr>
        </thead>
        <tbody>
        <?php foreach ($systems as $system): ?>
        <tr style="height: <?= count($systems) === 1 ? 50 : 30 ?>px;">
            <?php if ($showIcons): ?><td colspan="20">
                <a href="/<?= $system === "gdapd" ? "raindrops" : ($system === "ynmuc" ? "cloudburst" : $app["other"]["slug"]) ?>" style="width: 100%; height: 30px; display: flex; align-items: center; justify-content: center;">
                    <img alt="" style="border-radius: 5px; height: 24px; text-align: center;" src="<?= getAsset($system) ?>">
                </a>
            </td><?php endif; ?>
            <?php

            $leftCols = 420;

            $time = time() - 3600 * 7;
            $switches = [
                ...array_reverse(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$system/switches.json"), true)),
                [
                    'id' => '00000000-0000-0000-0000-000000000000',
                    'timestamp' => date('c', time() + 3600),
                    'members' => []
                ]
            ];

            foreach ($switches as $index => $switch) {
                if (strtotime($switch["timestamp"]) >= $time) {
                    $correct = $switches[$index - 1];
                    $v = floor((strtotime($switch["timestamp"]) - $time) / 60);

                    echo('<td style="max-width: 100%; overflow: hidden; text-align: left; white-space: nowrap; padding: 0 15px; height: ' . 50 / count($systems) . 'px; background-color: #' . (getMemberWithoutSystem($correct["members"][0])["color"] ?? "000000") . '80;" colspan="' . ($v > $leftCols ? $leftCols : $v) . '"><a style="color: white; cursor: pointer; text-decoration: none; width: 100%; display: flex; height: ' . 50 / count($systems) . 'px; align-items: center; justify-content: left;" href="/' . getMemberWithoutSystem($correct["members"][0])["name"] . '">' . implode(", ", array_map(function ($i) {
                            return getMemberWithoutSystem($i)["display_name"] ?? getMemberWithoutSystem($i)["name"] ?? $i;
                        }, $correct["members"])) . '</a></td>');

                    $leftCols -= $v; if ($leftCols < 0) $leftCols = 0;
                    $time = strtotime($switch["timestamp"]);
                }
            }

            ?>
        </tr>
        <?php endforeach; ?>
        <tr class="row-desktop">
            <?php if ($showIcons): ?><td colspan="20"></td><?php endif; ?>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">6 hours ago</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">5 hours ago</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">4 hours ago</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">3 hours ago</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">2 hours ago</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">1 hour ago</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">Now</td>
        </tr>
        <tr class="row-mobile">
            <?php if ($showIcons): ?><td colspan="20"></td><?php endif; ?>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-6h</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-5h</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-4h</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-3h</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-2</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">-1</td>
            <td colspan="60" style="text-align: right; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.5);">Now</td>
        </tr>
        <tr>
            <?php for ($i = 0; $i < 420; $i++): ?><td></td><?php endfor; ?>
        </tr>
        </tbody>
    </table>

    <style>
        .row-mobile {
            display: none !important;
        }

        .row-desktop {
            display: table-row !important;
        }

        @media (max-width: 991px) {
            .row-desktop {
                display: none !important;
            }

            .row-mobile {
                display: table-row !important;
            }
        }
    </style>
<?php }