Skip to content

Commit

Permalink
Revamped Admin panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@bubner
bubner committed Aug 20, 2023
1 parent 4cc0b80 commit 3471c79
Show file tree
Hide file tree
Showing 5 changed files with 194 additions and 152 deletions.
7 changes: 5 additions & 2 deletions src/Firebase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export interface UserData {
admin: boolean;
read: boolean;
write: boolean;
upload: boolean;
online:
| boolean
| {
Expand Down Expand Up @@ -239,6 +240,7 @@ export function useAuthStateChanged(): void {
read: false,
write: false,
admin: false,
upload: false,
});

// Reload the window as the data collection methods may have already fired
Expand All @@ -259,9 +261,10 @@ export function isMessageOverLimit(message: string): boolean {

// Change profanity level setting
export async function changeAutomodThreshold(level: number): Promise<void> {
// Clip to be 0 <= level <= 1.0
// Clip to be 0 <= level <= 0.98
// This is because 1.0 actually never happens with the external API
if (level < 0) level = 0;
if (level > 1) level = 1;
if (level > 0.98) level = 0.98;
await set(ref(db, "settings/automod_threshold"), level);
}

Expand Down
96 changes: 56 additions & 40 deletions src/chat/FileUploads.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { ChangeEventHandler, ClipboardEvent, useCallback, useEffect, useRef, useState } from "react";
import { storage, uploadFileMsg } from "../Firebase";
import { auth, storage, uploadFileMsg, getData, toCommas } from "../Firebase";
import { getDownloadURL, ref, uploadBytesResumable, UploadTask, UploadTaskSnapshot } from "firebase/storage";
import Popup from "reactjs-popup";
import { PopupActions } from "reactjs-popup/dist/types";
Expand All @@ -18,6 +18,12 @@ function FileUploads() {
const [isFileUploading, setIsFileUploading] = useState(false);
const [isFileUploaded, setIsFileUploaded] = useState(false);
const [isClipboard, setIsClipboard] = useState(false);
const [hasPermission, setHasPermission] = useState(false);
useEffect(() => {
getData("users", toCommas(auth.currentUser?.email!)).then((data) => {
setHasPermission(data?.upload);
});
}, []);

const uploadTaskRef = useRef<UploadTask>();

Expand Down Expand Up @@ -75,7 +81,7 @@ function FileUploads() {
};

const handleSubmission = () => {
if (!isFilePicked || !selectedFile) return;
if (!isFilePicked || !selectedFile || !hasPermission) return;
setIsFileUploading(true);

// Generate a random string of characters to supplement the file name to avoid duplicates
Expand Down Expand Up @@ -159,46 +165,56 @@ function FileUploads() {
&times;
</span>
<h3 className="ftitle">File Upload Menu</h3>
{isFileUploaded ? (
<div className="ftext">File uploaded.</div>
) : !isClipboard ? (
<input type="file" name="file" onChange={changeHandler} className="fileInput" />
) : (
<div className="ftext">
<i>File supplied by message box clipboard paste.</i>
</div>
)}
{isFilePicked && selectedFile != null && !isFileUploaded && (
<div className="fileinfo">
{hasPermission && (
<>
{isFileUploaded ? (
<div className="ftext">File uploaded.</div>
) : !isClipboard ? (
<input type="file" name="file" onChange={changeHandler} className="fileInput" />
) : (
<div className="ftext">
<i>File supplied by message box clipboard paste.</i>
</div>
)}

{isFilePicked && selectedFile != null && !isFileUploaded && (
<div className="fileinfo">
<br />
<p>
<i>File name:</i> {selectedFile.name} <br />
<i>Filetype:</i> {selectedFile.type || "unknown"} <br />
<i>Size in bytes:</i> {formatBytes(selectedFile.size)}
</p>
<p>
<b>Upload file?</b>
</p>
<div>
<button className="uploadButton" onClick={handleSubmission}>
Upload
</button>
</div>
</div>
)}
<br />
<p>
<i>File name:</i> {selectedFile.name} <br />
<i>Filetype:</i> {selectedFile.type || "unknown"} <br />
<i>Size in bytes:</i> {formatBytes(selectedFile.size)}
</p>
<p>
<b>Upload file?</b>
</p>
<div>
<button className="uploadButton" onClick={handleSubmission}>
Upload
</button>
</div>
</div>
)}
<br />
{isFileUploading && !isFileUploaded && (
<div className="barload">
<div className="outerload">
<div
className="innerload"
style={{
width: `${progressPercent}%`,
}}
>
<p>Uploading... {progressPercent}%</p>
{isFileUploading && !isFileUploaded && (
<div className="barload">
<div className="outerload">
<div
className="innerload"
style={{
width: `${progressPercent}%`,
}}
>
<p>Uploading... {progressPercent}%</p>
</div>
</div>
</div>
</div>
)}
</>
)}
{!hasPermission && (
<div className="ftext">
<i>You do not have permission to upload files.</i>
</div>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/chat/Message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function Message(props: { isAdmin: boolean; message: MessageData; key: string })
</i>
<br />
</div>
{message.text}
{messageText}
</p>
</>
) : (
Expand Down
96 changes: 56 additions & 40 deletions src/css/Admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,30 +22,30 @@
max-height: 300px;
}

.authorised ul li::before {
content: "⮞ ";
}

.authorised ul li::after {
content: " ⮜";
}

.authorised {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: max-content max-content max-content max-content;
gap: 0 0;
grid-template-areas:
"title close"
"users users"
"bu bu"
"sysmsg sysmsg"
"thresh thresh"
"tt tt";
"users settings"
}

.settings {
grid-area: settings;
padding: 12px;
width: 100%;
}

.close {
grid-area: close;
position: absolute;
right: 0;
}

.closer {
position: static;
}

.title {
Expand All @@ -65,64 +65,70 @@
}

.users li {
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}

.users li button {
transition: color 0.3s;
padding: 8px;
border-radius: 8px;
margin: 4px;
background-color: rgb(58, 58, 58);
margin: 12px 0 12px 6px;
color: rgb(177, 177, 177);
border-radius: 4px;
}

.users li button:hover {
background-color: rgb(43, 43, 43);
color: rgb(255, 255, 255) !important;
cursor: pointer;
}

.users li span {
margin-right: auto;
}

.del {
color: red !important;
background-color: #1f1f1f !important;
}

.del:hover {
background-color: #0f0f0f !important;
}

.new,
.sysmsg,
.thresh {
.thresh,
.cleardb {
transition: background-color 0.4s;
background-color: rgb(15, 71, 27) !important;
padding: 12px !important;
border-radius: 12px;
width: 66%;
transform: translateX(25%);
grid-area: bu;
}

.thresh {
margin-top: 12px;
background-color: rgb(0, 87, 109) !important;
grid-area: thresh;
}

.thresh:hover {
background-color: rgb(0, 102, 128) !important;
background-color: rgb(0, 122, 153) !important;
}

.new:hover {
background-color: rgb(28, 126, 49) !important;
}

.cleardb {
transition: background-color 0.4s;
background-color: rgb(73, 0, 0);
border-radius: 12px;
background-color: rgb(73, 0, 0) !important;
margin-top: 12px;
padding: 12px;
text-align: center;
width: 100%;
}

.cleardb {
grid-area: tt;
}

.sysmsg {
margin-top: 12px;
background-color: rgb(58, 58, 58) !important;
grid-area: sysmsg;
}

.sysmsg:hover {
Expand All @@ -132,15 +138,25 @@

.cleardb:hover {
cursor: pointer;
background-color: rgb(163, 0, 0);
background-color: rgb(163, 0, 0) !important;
}

@media only screen and (max-width: 600px) {
.authorised ul li::before {
content: "";
}
.portalreference {
font-size: 10px;
font-style: italic;
}

.authorised ul li::after {
content: "";
@media only screen and (max-width: 1200px) {
.portalreference {
display: none;
}
.authorised {
grid-template-columns: auto;
grid-template-rows: max-content max-content max-content max-content max-content;
gap: 0 0;
grid-template-areas:
"title"
"users"
"settings";
}
}
Loading

0 comments on commit 3471c79

Please sign in to comment.