Rust-PubSub-Server/control-panel.html at master · venantvr-pubsub/Rust-PubSub-Server · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Control Panel</title>
    <script src="/static/dashboard-guard.js"></script>
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/style.css" rel="stylesheet">
</head>
<body>

<header id="main-header"></header>

<main class="container" style="padding-top: 80px; padding-bottom: 2rem;">
    <section class="card mb-4">
        <div class="card-body">
            <h2 class="card-title">Consumer Connection</h2>
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label" for="consumer">Consumer Name</label>
                    <input class="form-control" id="consumer" type="text" value="alice"/>
                </div>
                <div class="col-md-5">
                    <label class="form-label" for="topics">Topics (comma-separated)</label>
                    <input class="form-control" id="topics" type="text" value="orders,inventory,shipping"/>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary w-100" id="connectBtn">Connect & Subscribe</button>
                </div>
            </div>
        </div>
    </section>

    <section class="card mb-4">
        <div class="card-body">
            <h2 class="card-title">Publish Message</h2>
            <div class="row g-3 align-items-end">
                <div class="col">
                    <label class="form-label" for="pubTopic">Topic</label>
                    <input class="form-control" id="pubTopic" type="text" placeholder="e.g., orders">
                </div>
                <div class="col">
                    <label class="form-label" for="pubProducer">Producer Name</label>
                    <input class="form-control" id="pubProducer" type="text" value="frontend_publisher"/>
                </div>
                <div class="col">
                    <label class="form-label" for="pubMessage">Message</label>
                    <input class="form-control" id="pubMessage" type="text" placeholder="Your message here"/>
                </div>
                <div class="col-auto">
                    <button class="btn btn-success w-100" id="pubBtn">Publish</button>
                </div>
            </div>
        </div>
    </section>

    <ul class="nav nav-tabs" id="pubSubTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="clients-tab" data-bs-toggle="tab" data-bs-target="#clients" type="button" role="tab" aria-controls="clients"
                    aria-selected="true">Clients Connected
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages"
                    aria-selected="false">Published Messages
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="consumptions-tab" data-bs-toggle="tab" data-bs-target="#consumptions" type="button" role="tab" aria-controls="consumptions"
                    aria-selected="false">Consumptions
            </button>
        </li>
    </ul>

    <div class="tab-content" id="pubSubTabContent">
        <div class="tab-pane fade show active" id="clients" role="tabpanel" aria-labelledby="clients-tab">
            <div class="table-responsive">
                <table class="table table-hover" id="clientsTable">
                    <thead>
                    <tr>
                        <th>Consumer</th>
                        <th>Topic</th>
                        <th>Connected At</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
            <div class="table-responsive">
                <table class="table table-hover" id="messagesTable">
                    <thead>
                    <tr>
                        <th>Producer</th>
                        <th>Topic</th>
                        <th>Message</th>
                        <th>Timestamp</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="tab-pane fade" id="consumptions" role="tabpanel" aria-labelledby="consumptions-tab">
            <div class="table-responsive">
                <table class="table table-hover" id="consTable">
                    <thead>
                    <tr>
                        <th>Consumer</th>
                        <th>Topic</th>
                        <th>Message</th>
                        <th>Timestamp</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/nav.js"></script>
<script src="/static/control-panel.js"></script>
</body>
</html>