nodebb-nodegpt-sonar/poll-demo.html at main · IndyaG/nodebb-nodegpt-sonar · 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poll Component Demo</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Custom Poll CSS -->
    <link rel="stylesheet" href="polls.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .demo-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .post-container {
            background: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .post-content {
            margin-bottom: 1rem;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h1 class="mb-4">NodeBB Poll Component Demo</h1>

        <!-- Demo Post with Poll (before voting) -->
        <div class="post-container">
            <div class="post-content">
                <h5>Sample Announcement Post</h5>
                <p>This is a sample post with a poll attached. Students can vote on the poll question below.</p>
            </div>

            <!-- Poll Component (Voting State) -->
            <div component="post/poll" class="card mb-3 post-poll" data-poll-id="sample-poll-1">
                <div class="card-header">
                    <h6 class="mb-0 fw-semibold">
                        <i class="fa fa-pie-chart text-primary me-2"></i>
                        What's your preferred programming language for this course?
                    </h6>
                </div>
                <div class="card-body">
                    <!-- Poll voting view (before voting) -->
                    <div component="poll/voting">
                        <form component="poll/form">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="pollOption" id="poll-option-0"
                                       value="0" data-option-id="0">
                                <label class="form-check-label" for="poll-option-0">
                                    JavaScript
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="pollOption" id="poll-option-1"
                                       value="1" data-option-id="1">
                                <label class="form-check-label" for="poll-option-1">
                                    Python
                                </label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="pollOption" id="poll-option-2"
                                       value="2" data-option-id="2">
                                <label class="form-check-label" for="poll-option-2">
                                    Java
                                </label>
                            </div>
                            <div class="d-flex gap-2 mt-3">
                                <button type="submit" component="poll/vote-btn" class="btn btn-primary btn-sm">
                                    <i class="fa fa-check me-1"></i>
                                    Vote
                                </button>
                                <small class="text-muted align-self-center">
                                    Poll closes in 7 days
                                </small>
                            </div>
                        </form>
                        <div component="poll/message" class="alert alert-sm mt-2 d-none"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Demo Post with Poll Results (after voting) -->
        <div class="post-container">
            <div class="post-content">
                <h5>Sample Post - Poll Results</h5>
                <p>This shows how the poll looks after a student has voted.</p>
            </div>

            <!-- Poll Component (Results State) -->
            <div component="post/poll" class="card mb-3 post-poll" data-poll-id="sample-poll-2">
                <div class="card-header">
                    <h6 class="mb-0 fw-semibold">
                        <i class="fa fa-pie-chart text-primary me-2"></i>
                        Which assignment format do you prefer?
                    </h6>
                </div>
                <div class="card-body">
                    <!-- Poll results view (after voting) -->
                    <div component="poll/results">
                        <div class="poll-option mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="poll-option-text fw-semibold text-primary">
                                    <i class="fa fa-check me-1"></i>
                                    Written Report
                                </span>
                                <span class="poll-option-count text-muted">
                                    15 votes (60%)
                                </span>
                            </div>
                            <div class="progress" style="height: 6px;">
                                <div class="progress-bar bg-primary" style="width: 60%"></div>
                            </div>
                        </div>
                        <div class="poll-option mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="poll-option-text">
                                    Presentation
                                </span>
                                <span class="poll-option-count text-muted">
                                    8 votes (32%)
                                </span>
                            </div>
                            <div class="progress" style="height: 6px;">
                                <div class="progress-bar bg-secondary" style="width: 32%"></div>
                            </div>
                        </div>
                        <div class="poll-option mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="poll-option-text">
                                    Video Demonstration
                                </span>
                                <span class="poll-option-count text-muted">
                                    2 votes (8%)
                                </span>
                            </div>
                            <div class="progress" style="height: 6px;">
                                <div class="progress-bar bg-secondary" style="width: 8%"></div>
                            </div>
                        </div>
                        <div class="poll-footer mt-3 pt-3 border-top">
                            <small class="text-muted">
                                <i class="fa fa-users me-1"></i>
                                25 votes total • Ends in 3 days
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert alert-info">
            <h6><i class="fa fa-info-circle me-2"></i>Demo Instructions</h6>
            <p class="mb-1">This demo shows the poll component in both states:</p>
            <ul class="mb-0">
                <li><strong>First poll:</strong> Shows the voting interface (before voting). Try selecting an option and clicking "Vote".</li>
                <li><strong>Second poll:</strong> Shows the results view (after voting). The user's selection is highlighted.</li>
            </ul>
        </div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Mock Poll JavaScript for Demo -->
    <script>
        $(document).ready(function() {
            // Simplified version of the poll functionality for demo
            $('[component="poll/form"]').on('submit', function(e) {
                e.preventDefault();
                const form = $(this);
                const pollContainer = form.closest('[component="post/poll"]');
                const selectedOption = form.find('input[name="pollOption"]:checked');

                if (!selectedOption.length) {
                    showMessage(pollContainer, 'Please select an option before voting.', 'warning');
                    return;
                }

                const voteBtn = pollContainer.find('[component="poll/vote-btn"]');
                voteBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i>Voting...');

                setTimeout(() => {
                    // Simulate successful vote and update display
                    updatePollToResults(pollContainer, parseInt(selectedOption.val()));
                    showMessage(pollContainer, 'Your vote has been recorded!', 'success');
                }, 800);
            });

            function updatePollToResults(pollContainer, votedIndex) {
                const options = ['JavaScript', 'Python', 'Java'];
                const votes = [12, 18, 5];
                votes[votedIndex] += 1;

                const total = votes.reduce((a, b) => a + b, 0);

                let resultsHtml = '<div component="poll/results">';

                options.forEach((option, index) => {
                    const percentage = Math.round((votes[index] / total) * 100);
                    const isSelected = index === votedIndex;

                    resultsHtml += `
                        <div class="poll-option mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="poll-option-text ${isSelected ? 'fw-semibold text-primary' : ''}">
                                    ${isSelected ? '<i class="fa fa-check me-1"></i>' : ''}
                                    ${option}
                                </span>
                                <span class="poll-option-count text-muted">
                                    ${votes[index]} ${votes[index] === 1 ? 'vote' : 'votes'} (${percentage}%)
                                </span>
                            </div>
                            <div class="progress" style="height: 6px;">
                                <div class="progress-bar ${isSelected ? 'bg-primary' : 'bg-secondary'}"
                                     style="width: ${percentage}%"></div>
                            </div>
                        </div>
                    `;
                });

                resultsHtml += `
                    <div class="poll-footer mt-3 pt-3 border-top">
                        <small class="text-muted">
                            <i class="fa fa-users me-1"></i>
                            ${total} ${total === 1 ? 'vote' : 'votes'} total • Poll closes in 7 days
                        </small>
                    </div>
                </div>`;

                pollContainer.find('.card-body').html(resultsHtml);
            }

            function showMessage(pollContainer, message, type) {
                const messageEl = pollContainer.find('[component="poll/message"]');
                messageEl.removeClass('d-none alert-success alert-warning alert-danger alert-info')
                        .addClass(`alert-${type}`)
                        .text(message)
                        .show();

                if (type === 'success') {
                    setTimeout(() => {
                        messageEl.fadeOut();
                    }, 3000);
                }
            }
        });
    </script>
</body>
</html>