aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/pages/summary_modview.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/pages/summary_modview.js')
-rw-r--r--frontend/src/components/pages/summary_modview.js254
1 files changed, 0 insertions, 254 deletions
diff --git a/frontend/src/components/pages/summary_modview.js b/frontend/src/components/pages/summary_modview.js
deleted file mode 100644
index 3541c48..0000000
--- a/frontend/src/components/pages/summary_modview.js
+++ /dev/null
@@ -1,254 +0,0 @@
1import React from 'react';
2import { useLocation } from "react-router-dom";
3import ReactMarkdown from 'react-markdown'
4
5import "./summary_modview.css";
6
7
8export default function Modview(prop) {
9const {selectedRun,data,token} = prop
10
11const [menu,setMenu] = React.useState(0)
12React.useEffect(()=>{
13if(menu===3){ // add
14 document.querySelector("#modview-route-name>input").value=""
15 document.querySelector("#modview-route-score>input").value=""
16 document.querySelector("#modview-route-date>input").value=""
17 document.querySelector("#modview-route-showcase>input").value=""
18 document.querySelector("#modview-route-description>textarea").value=""
19 }
20if(menu===2){ // edit
21 document.querySelector("#modview-route-id>input").value=data.summary.routes[selectedRun].route_id
22 document.querySelector("#modview-route-name>input").value=data.summary.routes[selectedRun].history.runner_name
23 document.querySelector("#modview-route-score>input").value=data.summary.routes[selectedRun].history.score_count
24 document.querySelector("#modview-route-date>input").value=data.summary.routes[selectedRun].history.date.split("T")[0]
25 document.querySelector("#modview-route-showcase>input").value=data.summary.routes[selectedRun].showcase
26 document.querySelector("#modview-route-description>textarea").value=data.summary.routes[selectedRun].description
27} // eslint-disable-next-line
28},[menu])
29
30function compressImage(file) {
31 const reader = new FileReader();
32 reader.readAsDataURL(file);
33 return new Promise(resolve => {
34 reader.onload = () => {
35 const img = new Image();
36 img.src = reader.result;
37 img.onload = () => {
38 let {width, height} = img;
39 if (width > 550) {
40 height *= 550 / width;
41 width = 550;
42 }
43 if (height > 320) {
44 width *= 320 / height;
45 height = 320;
46 }
47 const canvas = document.createElement('canvas');
48 canvas.width = width;
49 canvas.height = height;
50 canvas.getContext('2d').drawImage(img, 0, 0, width, height);
51 resolve(canvas.toDataURL(file.type, 0.6));
52 };
53 };
54 });
55}
56const [image,setImage] = React.useState(null)
57function uploadImage(){
58 if(window.confirm("Are you sure you want to submit this to the database?")){
59 fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/image`,{
60 method: 'PUT',
61 headers: {Authorization: token},
62 body: JSON.stringify({"image": image})
63 }).then(r=>window.location.reload())
64 }
65}
66const location = useLocation()
67function editRoute(){
68if(window.confirm("Are you sure you want to submit this to the database?")){
69 let payload = {
70 "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value,
71 "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z",
72 "route_id": parseInt(document.querySelector("#modview-route-id>input").value),
73 "score_count": parseInt(document.querySelector("#modview-route-score>input").value),
74 "showcase": document.querySelector("#modview-route-showcase>input").value,
75 "user_name": document.querySelector("#modview-route-name>input").value
76 }
77 fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
78 method: 'PUT',
79 headers: {Authorization: token},
80 body: JSON.stringify(payload)
81 }).then(r=>window.location.reload())
82 }
83}
84
85
86function addRoute(){
87 if(window.confirm("Are you sure you want to submit this to the database?")){
88 let payload = {
89 "category_id": parseInt(document.querySelector("#modview-route-category>select").value),
90 "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value,
91 "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z",
92 "score_count": parseInt(document.querySelector("#modview-route-score>input").value),
93 "showcase": document.querySelector("#modview-route-showcase>input").value,
94 "user_name": document.querySelector("#modview-route-name>input").value
95 }
96 fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
97 method: 'POST',
98 headers: {Authorization: token},
99 body: JSON.stringify(payload)
100 }).then(r=>window.location.reload())
101 }
102}
103
104function deleteRoute(){
105if(data.summary.routes[0].category==='')
106{window.alert("no run selected")}else{
107if(window.confirm(`Are you sure you want to delete this run from the database?
108${data.summary.routes[selectedRun].category.name} ${data.summary.routes[selectedRun].history.score_count} portals ${data.summary.routes[selectedRun].history.runner_name}`)===true){
109 console.log("deleted:",selectedRun)
110 fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
111 method: 'DELETE',
112 headers: {Authorization: token},
113 body: JSON.stringify({"route_id":data.summary.routes[selectedRun].route_id})
114 }).then(r=>window.location.reload())
115}}
116
117}
118
119const [showButton, setShowButton] = React.useState(1)
120const modview = document.querySelector("div#modview")
121React.useEffect(()=>{
122 if(modview!==null){
123 showButton ? modview.style.transform="translateY(-68%)"
124 : modview.style.transform="translateY(0%)"
125 }
126 let modview_block = document.querySelector("#modview_block")
127 showButton===1?modview_block.style.display="none":modview_block.style.display="block"// eslint-disable-next-line
128},[showButton])
129
130const [md,setMd] = React.useState("")
131
132return (
133 <>
134 <div id="modview_block"></div>
135 <div id='modview'>
136 <div>
137 <button onClick={()=>setMenu(1)}>edit image</button>
138 <button onClick={
139 data.summary.routes[0].category===''?()=>window.alert("no run selected"):()=>setMenu(2)}>edit selected route</button>
140 <button onClick={()=>setMenu(3)}>add new route</button>
141 <button onClick={()=>deleteRoute()}>delete selected route</button>
142 </div>
143 <div>
144 {showButton ?(
145 <button onClick={()=>setShowButton(0)}>Show</button>
146 ) : (
147 <button onClick={()=>{setShowButton(1);setMenu(0)}}>Hide</button>
148 )}
149 </div>
150 </div>
151 {menu!==0? (
152 <div id='modview-menu'>
153 {menu===1? (
154 // image
155 <div id='modview-menu-image'>
156 <div>
157 <span>current image:</span>
158 <img src={data.map.image} alt="missing" />
159 </div>
160
161 <div>
162 <span>new image:
163 <input type="file" accept='image/*' onChange={e=>
164 compressImage(e.target.files[0])
165 .then(d=>setImage(d))
166 }/></span>
167 {image!==null?(<button onClick={()=>uploadImage()}>upload</button>):<span></span>}
168 <img src={image} alt="" id='modview-menu-image-file'/>
169
170 </div>
171 </div>
172 ):menu===2?(
173 // edit route
174 <div id='modview-menu-edit'>
175 <div id='modview-route-id'>
176 <span>route id:</span>
177 <input type="number" disabled/>
178 </div>
179 <div id='modview-route-name'>
180 <span>runner name:</span>
181 <input type="text"/>
182 </div>
183 <div id='modview-route-score'>
184 <span>score:</span>
185 <input type="number"/>
186 </div>
187 <div id='modview-route-date'>
188 <span>date:</span>
189 <input type="date"/>
190 </div>
191 <div id='modview-route-showcase'>
192 <span>showcase video:</span>
193 <input type="text"/>
194 </div>
195 <div id='modview-route-description' style={{height:"180px",gridColumn:"1 / span 5"}}>
196 <span>description:</span>
197 <textarea onChange={()=>setMd(document.querySelector("#modview-route-description>textarea").value)}></textarea>
198 </div>
199 <button style={{gridColumn:"2 / span 3",height:"40px"}} onClick={editRoute}>Apply</button>
200 </div>
201 ):menu===3?(
202 // add route
203 <div id='modview-menu-add'>
204 <div id='modview-route-category'>
205 <span>category:</span>
206 <select>
207 <option value="1" key="1">CM</option>
208 <option value="2" key="2">No SLA</option>
209 {data.map.game_name==="Portal 2 - Cooperative"?"":(
210 <option value="3" key="3">Inbounds SLA</option>)}
211 <option value="4" key="4">Any%</option>
212 </select>
213 </div>
214 <div id='modview-route-name'>
215 <span>runner name:</span>
216 <input type="text" />
217 </div>
218 <div id='modview-route-score'>
219 <span>score:</span>
220 <input type="number" />
221 </div>
222 <div id='modview-route-date'>
223 <span>date:</span>
224 <input type="date" />
225 </div>
226 <div id='modview-route-showcase'>
227 <span>showcase video:</span>
228 <input type="text" />
229 </div>
230 <div id='modview-route-description' style={{height:"180px",gridColumn:"1 / span 5"}}>
231 <span>description:</span>
232 <textarea defaultValue={"No description available."} onChange={()=>setMd(document.querySelector("#modview-route-description>textarea").value)}></textarea>
233 </div>
234 <button style={{gridColumn:"2 / span 3",height:"40px"}} onClick={addRoute}>Apply</button>
235 </div>
236 ):("error")}
237
238 {menu!==1?(
239 <div id='modview-md'>
240 <span>Markdown preview</span>
241 <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>documentation</a></span>
242 <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>demo</a></span>
243 <p>
244 <ReactMarkdown>{md}
245 </ReactMarkdown>
246 </p>
247 </div>
248 ):""}
249 </div>):""}
250
251 </>
252)
253}
254
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:49:53 +0000