AthletiLink/control_panel.html at main · OptimaLPro/AthletiLink · GitHub

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!--
    This is the control panel page of the AthletiLink application.
    It provides a user interface for managing users, posts, comments, groups, and graphs.
    The page includes icons for each category and a badge to display the number of pending posts.
    The page also includes a close icon to navigate back to the index page.
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Control Panel</title>
    <link rel="icon" type="image/x-icon" href="/assets/images/Favicon/Regular/favicon-32x32.png" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="assets/css/styles.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: "Roboto", sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f1f1f1;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 60%;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        .icon-container {
            text-align: center;
            margin-top: 20px;
            position: relative;
            display: inline-block;
        }

        .icon {
            font-size: 3em;
            cursor: pointer;
        }

        .icon-title {
            cursor: pointer;
        }

        .badge {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 100%;
            transform: translate(-50%, -50%);
            background-color: #ea0000;
            color: white;
            border-radius: 50%;
            font-size: 0.75em;
            line-height: 1;
        }
    </style>
</head>

<body>
    <div class="container mt-6 effect-fadeIn">
        <!-- Users Icon -->
        <div class="icon-container">
            <div class="icon" onclick="redirectTo('users_edit.html')">&#128100;</div>
            <p class="icon-title" onclick="redirectTo('users_edit.html')">Users</p>
        </div>
        <!-- Posts Icon -->
        <div class="icon-container">
            <div class="icon" onclick="redirectTo('posts_edit.html')">&#128203;</div>
            <span id="pendingPostsBadge" class="badge badge-pill badge-warning">0</span>
            <p class="icon-title" onclick="redirectTo('posts_edit.html')">Posts</p>
        </div>
        <!-- Comments Icon -->
        <div class="icon-container">
            <div class="icon" onclick="redirectTo('comments_edit.html')">&#128172;</div>
            <p class="icon-title" onclick="redirectTo('comments_edit.html')">Comments</p>
        </div>
        <!-- Groups Icon -->
        <div class="icon-container">
            <div class="icon" onclick="redirectTo('groups_edit.html')">&#128106;</div>
            <p class="icon-title" onclick="redirectTo('groups_edit.html')">Groups</p>
        </div>
        <!-- Graphs Icon -->
        <div class="icon-container">
            <div class="icon" onclick="redirectTo('graphs.html')">&#128200;</div>
            <p class="icon-title" onclick="redirectTo('graphs.html')">Graphs</p>
        </div>
    </div>
    <div id="close-icon" class="position-fixed effect-fadeIn"
        style="top: 30px; right: 30px; font-size: 20px; cursor: pointer;">
        <a href="index.html" style="text-decoration: none;"><span class="fa-stack fa-lg" style="color:#343a40;">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-times fa-stack-1x fa-inverse"></i>
            </span></a>
    </div>

    <script>
        // Redirect to the specified page
        function redirectTo(page) {
            window.location.href = page;
        }

        // Get the number of pending posts and display it in the badge
        document.addEventListener("DOMContentLoaded", function () {
            fetch('http://localhost:5500/get_pendings')
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    const pendingCount = data.pending_posts_count;
                    console.log("pending count: " + pendingCount);
                    document.getElementById('pendingPostsBadge').textContent = pendingCount;
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>

</html>