[0c6b92a] | 1 | import React, {useEffect, useState} from "react";
|
---|
| 2 | import styles from "./AdminPage.module.css";
|
---|
| 3 | import {TilesContainer} from "react-tiles-dnd";
|
---|
| 4 | import HttpService from "../../scripts/net/HttpService.js";
|
---|
| 5 | import config from "../../scripts/net/netconfig.js";
|
---|
| 6 | import card from "../../assets/card-map.png";
|
---|
| 7 | import MapInfoModal from "../../components/MapInfoModal/MapInfoModal.jsx";
|
---|
| 8 | import {useAppContext} from "../../components/AppContext/AppContext.jsx";
|
---|
| 9 | import PublishForm from "../../components/PublishForm/PublishForm.jsx";
|
---|
| 10 | import Logo from "../../components/Logo/Logo.jsx";
|
---|
| 11 | import Profile from "../../components/Profile/Profile.jsx";
|
---|
| 12 | import Toast from "../../components/Toast/Toast.jsx";
|
---|
[79a0317] | 13 | import ListReports from "../../components/ListReports/ListReports.jsx";
|
---|
[0c6b92a] | 14 |
|
---|
| 15 | const renderTile = ({data, isDragging}, handleApprove, handleDeny, openMapInfoModal, openPublishForm) => (
|
---|
| 16 | <div className={`${styles.tile} ${isDragging ? styles.dragging : ""}`} onClick={() => openMapInfoModal(data)}>
|
---|
| 17 | <img src={card} className={styles.imgStyle} alt="Map Thumbnail"/>
|
---|
| 18 | <div className={styles.mapTitle}>{data.mapName}</div>
|
---|
| 19 | <button className={styles.viewPublishFormButton} onClick={(e) => {
|
---|
| 20 | e.stopPropagation();
|
---|
| 21 | openPublishForm(data);
|
---|
| 22 | }}>
|
---|
| 23 | View Form
|
---|
| 24 | </button>
|
---|
| 25 | <div className={styles.buttonContainer}>
|
---|
| 26 | {/*<input*/}
|
---|
| 27 | {/* type="text"*/}
|
---|
| 28 | {/* placeholder="Reason"*/}
|
---|
| 29 | {/* className={styles.reasonInput}*/}
|
---|
| 30 | {/* onClick={(e) => e.stopPropagation()}*/}
|
---|
| 31 | {/*/>*/}
|
---|
| 32 | {/*<div className={styles.buttonsGroup}>*/}
|
---|
| 33 | {/* <button className={styles.approveButton} onClick={(e) => {*/}
|
---|
| 34 | {/* e.stopPropagation();*/}
|
---|
| 35 | {/* handleApprove(data.mapName);*/}
|
---|
| 36 | {/* }}>*/}
|
---|
| 37 | {/* Approve*/}
|
---|
| 38 | {/* </button>*/}
|
---|
| 39 | {/* <button className={styles.denyButton} onClick={(e) => {*/}
|
---|
| 40 | {/* e.stopPropagation();*/}
|
---|
| 41 | {/* const reason = e.target.closest('div').previousSibling.value;*/}
|
---|
| 42 | {/* handleDeny(data.mapName, reason);*/}
|
---|
| 43 | {/* }}>*/}
|
---|
| 44 | {/* Deny*/}
|
---|
| 45 | {/* </button>*/}
|
---|
| 46 |
|
---|
| 47 | {/*</div>*/}
|
---|
| 48 | </div>
|
---|
| 49 | </div>
|
---|
| 50 | );
|
---|
| 51 |
|
---|
| 52 | const tileSize = (tile) => ({
|
---|
| 53 | colSpan: tile.cols,
|
---|
| 54 | rowSpan: tile.rows,
|
---|
| 55 | });
|
---|
| 56 |
|
---|
| 57 | export default function AdminPage() {
|
---|
| 58 | const [pendingMaps, setPendingMaps] = useState([]);
|
---|
| 59 | const [selectedMap, setSelectedMap] = useState(null);
|
---|
| 60 | const [isMapInfoModalOpen, setIsMapInfoModalOpen] = useState(false);
|
---|
| 61 | const [publishFormMap, setPublishFormMap] = useState(null);
|
---|
| 62 | const [publishRequests, setPublishRequests] = useState([]);
|
---|
| 63 | const [currentForm, setCurrentForm] = useState({});
|
---|
| 64 | const {username} = useAppContext();
|
---|
| 65 |
|
---|
| 66 | const [toastMessage, setToastMessage] = useState(null);
|
---|
| 67 | const [toastType, setToastType] = useState(1);
|
---|
| 68 |
|
---|
| 69 | useEffect(() => {
|
---|
| 70 | const loadPendingMaps = async () => {
|
---|
| 71 | const httpService = new HttpService();
|
---|
| 72 | httpService.setAuthenticated();
|
---|
| 73 |
|
---|
| 74 | const respMaps = await httpService.get(`${config.admin.display}`);
|
---|
| 75 |
|
---|
| 76 | const mapTiles = respMaps.map((elem) => ({
|
---|
| 77 | mapName: elem.mapName,
|
---|
| 78 | cols: 1,
|
---|
| 79 | rows: 1,
|
---|
| 80 | status: elem.mapStatus,
|
---|
| 81 | created_at: elem.createdAt,
|
---|
| 82 | modified_at: elem.modifiedAt,
|
---|
| 83 | gmaps_url: elem.gmaps_url,
|
---|
| 84 | image_url: card,
|
---|
[79a0317] | 85 | })).filter((tile) => tile.status === "PENDING");
|
---|
[0c6b92a] | 86 |
|
---|
| 87 | setPendingMaps(mapTiles);
|
---|
| 88 | };
|
---|
| 89 |
|
---|
| 90 | loadPendingMaps();
|
---|
| 91 | }, [username]);
|
---|
| 92 |
|
---|
| 93 | useEffect(() => {
|
---|
| 94 | const loadPublishRequests = async () => {
|
---|
| 95 | const httpService = new HttpService(true);
|
---|
| 96 | const respPr = await httpService.get(`${config.admin.load_pr}`)
|
---|
| 97 |
|
---|
| 98 | setPublishRequests(respPr);
|
---|
| 99 | }
|
---|
| 100 |
|
---|
| 101 | loadPublishRequests();
|
---|
| 102 | }, []);
|
---|
| 103 |
|
---|
| 104 | const handleApprove = async (id,mapName) => {
|
---|
| 105 | const httpService = new HttpService();
|
---|
| 106 | httpService.setAuthenticated();
|
---|
| 107 | const url = `${config.admin.approve_pr}?id=${id}`;
|
---|
| 108 | closePublishForm()
|
---|
| 109 | try {
|
---|
| 110 | await httpService.post(url);
|
---|
| 111 | setPendingMaps((prev) => prev.filter((map) => map.mapName !== mapName));
|
---|
| 112 | showToast(`Publish Request "${id}" approved.`, 1)
|
---|
| 113 | } catch (error) {
|
---|
| 114 | console.error("Error approving pr:", error);
|
---|
| 115 | // alert("Failed to approve pr.");
|
---|
| 116 | showToast("Failed to approve pr.", 0)
|
---|
| 117 | }
|
---|
| 118 | };
|
---|
| 119 |
|
---|
| 120 | const showToast = (message, type = 1) => {
|
---|
| 121 | setToastMessage(message);
|
---|
| 122 | setToastType(type);
|
---|
| 123 | setTimeout(() => setToastMessage(null), 3000); // Automatically hide the toast after 3 seconds
|
---|
| 124 | };
|
---|
| 125 |
|
---|
| 126 | const handleDeny = async (id, mapName,reason) => {
|
---|
| 127 | const httpService = new HttpService();
|
---|
| 128 | httpService.setAuthenticated();
|
---|
| 129 | const url = `${config.admin.deny_pr}?id=${id}&reason=${encodeURIComponent(reason)}`;
|
---|
| 130 | closePublishForm()
|
---|
| 131 | try {
|
---|
| 132 | await httpService.post(url);
|
---|
| 133 | setPendingMaps((prev) => prev.filter((map) => map.mapName !== mapName));
|
---|
| 134 | showToast(`Publish request ${id} denied.`, 1)
|
---|
| 135 | } catch (error) {
|
---|
| 136 | console.error("Error denying pr:", error);
|
---|
| 137 | alert("Failed to deny pr.");
|
---|
| 138 | showToast("Failed to deny pr.", 0)
|
---|
| 139 | }
|
---|
| 140 | };
|
---|
| 141 |
|
---|
| 142 | const handlePublishFormSubmit = async (formData) => {
|
---|
| 143 | const httpService = new HttpService();
|
---|
| 144 | httpService.setAuthenticated();
|
---|
| 145 | const url = `${config.admin.approve_pr}?mapName=${formData.mapName}`;
|
---|
| 146 |
|
---|
| 147 | try {
|
---|
[79a0317] | 148 | await httpService.post(url, formData);
|
---|
[0c6b92a] | 149 | setPendingMaps((prev) => prev.filter((map) => map.mapName !== formData.mapName));
|
---|
| 150 | alert(`Map "${formData.mapName}" published successfully.`);
|
---|
| 151 | closePublishForm();
|
---|
| 152 | } catch (error) {
|
---|
| 153 | console.error("Error publishing map:", error);
|
---|
| 154 | alert("Failed to publish map. Please try again.");
|
---|
| 155 | }
|
---|
| 156 | };
|
---|
| 157 |
|
---|
| 158 |
|
---|
| 159 | const openMapInfoModal = (map) => {
|
---|
| 160 | setSelectedMap(map);
|
---|
| 161 | setIsMapInfoModalOpen(true);
|
---|
| 162 | };
|
---|
| 163 |
|
---|
| 164 | const closeMapInfoModal = () => {
|
---|
| 165 | setIsMapInfoModalOpen(false);
|
---|
| 166 | setSelectedMap(null);
|
---|
| 167 | };
|
---|
| 168 |
|
---|
| 169 | const openPublishForm = (data) => {
|
---|
| 170 | console.log("DATA MAP NAME", data.mapName)
|
---|
| 171 | publishRequests.forEach(pr => {
|
---|
| 172 | console.log("PR: " + JSON.stringify(pr))
|
---|
| 173 | })
|
---|
| 174 |
|
---|
| 175 | const pr = publishRequests.find(p => p.mapName === data.mapName);
|
---|
| 176 | console.log("FOUND PR: " + pr)
|
---|
| 177 | setCurrentForm(pr)
|
---|
| 178 | setPublishFormMap(data);
|
---|
| 179 | };
|
---|
| 180 |
|
---|
| 181 | const closePublishForm = () => {
|
---|
| 182 | setPublishFormMap(null);
|
---|
| 183 | };
|
---|
| 184 |
|
---|
| 185 | return (
|
---|
| 186 | <div className={styles.container}>
|
---|
| 187 | <Logo></Logo>
|
---|
| 188 | <Profile></Profile>
|
---|
| 189 | <h1>Pending Maps for Approval</h1>
|
---|
[79a0317] | 190 | <hr/>
|
---|
[0c6b92a] | 191 |
|
---|
| 192 | {publishFormMap && (
|
---|
| 193 | <PublishForm
|
---|
| 194 | isAdmin={true}
|
---|
| 195 | formData={currentForm}
|
---|
| 196 | onSubmit={handlePublishFormSubmit}
|
---|
| 197 | onCancel={closePublishForm}
|
---|
| 198 | onApprove={handleApprove}
|
---|
| 199 | onDeny={handleDeny}
|
---|
| 200 |
|
---|
| 201 | />
|
---|
| 202 | )}
|
---|
| 203 |
|
---|
| 204 |
|
---|
| 205 | <div className={styles.mapsContainer}>
|
---|
| 206 | <TilesContainer
|
---|
| 207 | data={pendingMaps}
|
---|
| 208 | renderTile={(tileProps) => renderTile(tileProps, handleApprove, handleDeny, openMapInfoModal, openPublishForm)}
|
---|
| 209 | tileSize={tileSize}
|
---|
| 210 | forceTileWidth={200}
|
---|
| 211 | forceTileHeight={250}
|
---|
| 212 | />
|
---|
| 213 | </div>
|
---|
[79a0317] | 214 | <hr/>
|
---|
[0c6b92a] | 215 | {isMapInfoModalOpen && (
|
---|
| 216 | <MapInfoModal
|
---|
| 217 | isOpen={isMapInfoModalOpen}
|
---|
| 218 | onClose={closeMapInfoModal}
|
---|
| 219 | map={selectedMap}
|
---|
| 220 | onUpdate={() => {
|
---|
| 221 | }}
|
---|
| 222 | onDelete={() => {
|
---|
| 223 | }}
|
---|
| 224 | published={true}
|
---|
| 225 | />
|
---|
| 226 | )}
|
---|
| 227 | {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
|
---|
[79a0317] | 228 | <hr/>
|
---|
| 229 | <ListReports></ListReports>
|
---|
[0c6b92a] | 230 | </div>
|
---|
| 231 | );
|
---|
| 232 | }
|
---|