Skip to content

Commit 36731f9

Browse files
steveseguinsteveseguin
committed
updated database viewer
1 parent 940fa35 commit 36731f9

4 files changed

Lines changed: 911 additions & 474 deletions

File tree

‎chathistory.html‎

Lines changed: 75 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,31 @@
2424
font-size: 16px;
2525
margin-bottom: 10px;
2626
}
27-
#filter-options {
28-
display: flex;
29-
flex-wrap: wrap;
30-
align-items: center;
31-
gap: 10px;
32-
}
27+
#filter-options {
28+
display: flex;
29+
flex-wrap: wrap;
30+
align-items: flex-end;
31+
gap: 10px;
32+
row-gap: 15px;
33+
}
34+
.filter-group {
35+
display: flex;
36+
flex-direction: column;
37+
min-width: 120px;
38+
gap: 4px;
39+
}
40+
.filter-checkboxes {
41+
display: flex;
42+
flex-wrap: wrap;
43+
gap: 12px;
44+
align-items: center;
45+
}
46+
.filter-checkboxes label {
47+
display: inline-flex;
48+
align-items: center;
49+
gap: 6px;
50+
font-weight: normal;
51+
}
3352
#messages-container {
3453
flex-grow: 1;
3554
overflow-y: auto;
@@ -64,10 +83,14 @@
6483
max-height: 100px;
6584
margin-top: 5px;
6685
}
67-
.donation {
68-
color: green;
69-
font-weight: bold;
70-
}
86+
.donation {
87+
color: green;
88+
font-weight: bold;
89+
}
90+
.membership {
91+
color: #0d47a1;
92+
font-weight: bold;
93+
}
7194
img, svg, video {
7295
max-width: 20px;
7396
max-height: 20px;
@@ -89,9 +112,9 @@
89112
border: none;
90113
cursor: pointer;
91114
}
92-
select, input[type="date"] {
93-
padding: 4px;
94-
}
115+
select, input[type="date"], input[type="text"] {
116+
padding: 4px;
117+
}
95118
#date-filter-container {
96119
display: none;
97120
margin-left: 5px;
@@ -104,11 +127,44 @@
104127
</head>
105128
<body>
106129
<div id="search-container">
107-
<input type="text" id="search-input" placeholder="Search messages...">
108-
<div id="filter-options">
109-
<div class="export-container">
110-
<span class="filter-label">Format:</span>
111-
<select id="export-format">
130+
<input type="text" id="search-input" placeholder="Search by name, id, message, or type...">
131+
<div id="filter-options">
132+
<div class="filter-group">
133+
<span class="filter-label">Source:</span>
134+
<select id="type-filter">
135+
<option value="">All Sources</option>
136+
</select>
137+
</div>
138+
<div class="filter-group">
139+
<span class="filter-label">Username:</span>
140+
<input type="text" id="username-filter" placeholder="eg: streamer123">
141+
</div>
142+
<div class="filter-group">
143+
<span class="filter-label">Keyword:</span>
144+
<input type="text" id="keyword-filter" placeholder="Search message text">
145+
</div>
146+
<div class="filter-group">
147+
<span class="filter-label">Date Range:</span>
148+
<div>
149+
<input type="date" id="message-date-from">
150+
<span>to</span>
151+
<input type="date" id="message-date-to">
152+
</div>
153+
</div>
154+
<div class="filter-group">
155+
<span class="filter-label">Highlights:</span>
156+
<div class="filter-checkboxes">
157+
<label><input type="checkbox" id="donation-filter">Donations</label>
158+
<label><input type="checkbox" id="membership-filter">Memberships</label>
159+
</div>
160+
</div>
161+
<div class="filter-group" style="min-width: auto;">
162+
<span class="filter-label">&nbsp;</span>
163+
<button id="clear-filters" type="button">Reset Filters</button>
164+
</div>
165+
<div class="export-container">
166+
<span class="filter-label">Format:</span>
167+
<select id="export-format">
112168
<option value="json">JSON</option>
113169
<option value="tsv">TSV</option>
114170
<option value="html">HTML</option>
@@ -137,4 +193,4 @@
137193
<div id="messages-container"></div>
138194
<script type="text/javascript" src="./chathistory.js?v=1"></script>
139195
</body>
140-
</html>
196+
</html>

0 commit comments

Comments
 (0)