From 26cdd0d363b1e279b14f7c5c3c12bb7d5e6d87d8 Mon Sep 17 00:00:00 2001 From: Nidboj132 Date: Wed, 12 Jul 2023 17:58:04 +0200 Subject: summary --- frontend/src/components/pages/summary_modview.js | 254 +++++++++++++++++++++++ 1 file changed, 254 insertions(+) create mode 100644 frontend/src/components/pages/summary_modview.js (limited to 'frontend/src/components/pages/summary_modview.js') diff --git a/frontend/src/components/pages/summary_modview.js b/frontend/src/components/pages/summary_modview.js new file mode 100644 index 0000000..3541c48 --- /dev/null +++ b/frontend/src/components/pages/summary_modview.js @@ -0,0 +1,254 @@ +import React from 'react'; +import { useLocation } from "react-router-dom"; +import ReactMarkdown from 'react-markdown' + +import "./summary_modview.css"; + + +export default function Modview(prop) { +const {selectedRun,data,token} = prop + +const [menu,setMenu] = React.useState(0) +React.useEffect(()=>{ +if(menu===3){ // add + document.querySelector("#modview-route-name>input").value="" + document.querySelector("#modview-route-score>input").value="" + document.querySelector("#modview-route-date>input").value="" + document.querySelector("#modview-route-showcase>input").value="" + document.querySelector("#modview-route-description>textarea").value="" + } +if(menu===2){ // edit + document.querySelector("#modview-route-id>input").value=data.summary.routes[selectedRun].route_id + document.querySelector("#modview-route-name>input").value=data.summary.routes[selectedRun].history.runner_name + document.querySelector("#modview-route-score>input").value=data.summary.routes[selectedRun].history.score_count + document.querySelector("#modview-route-date>input").value=data.summary.routes[selectedRun].history.date.split("T")[0] + document.querySelector("#modview-route-showcase>input").value=data.summary.routes[selectedRun].showcase + document.querySelector("#modview-route-description>textarea").value=data.summary.routes[selectedRun].description +} // eslint-disable-next-line +},[menu]) + +function compressImage(file) { + const reader = new FileReader(); + reader.readAsDataURL(file); + return new Promise(resolve => { + reader.onload = () => { + const img = new Image(); + img.src = reader.result; + img.onload = () => { + let {width, height} = img; + if (width > 550) { + height *= 550 / width; + width = 550; + } + if (height > 320) { + width *= 320 / height; + height = 320; + } + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + canvas.getContext('2d').drawImage(img, 0, 0, width, height); + resolve(canvas.toDataURL(file.type, 0.6)); + }; + }; + }); +} +const [image,setImage] = React.useState(null) +function uploadImage(){ + if(window.confirm("Are you sure you want to submit this to the database?")){ + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/image`,{ + method: 'PUT', + headers: {Authorization: token}, + body: JSON.stringify({"image": image}) + }).then(r=>window.location.reload()) + } +} +const location = useLocation() +function editRoute(){ +if(window.confirm("Are you sure you want to submit this to the database?")){ + let payload = { + "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value, + "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z", + "route_id": parseInt(document.querySelector("#modview-route-id>input").value), + "score_count": parseInt(document.querySelector("#modview-route-score>input").value), + "showcase": document.querySelector("#modview-route-showcase>input").value, + "user_name": document.querySelector("#modview-route-name>input").value + } + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{ + method: 'PUT', + headers: {Authorization: token}, + body: JSON.stringify(payload) + }).then(r=>window.location.reload()) + } +} + + +function addRoute(){ + if(window.confirm("Are you sure you want to submit this to the database?")){ + let payload = { + "category_id": parseInt(document.querySelector("#modview-route-category>select").value), + "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value, + "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z", + "score_count": parseInt(document.querySelector("#modview-route-score>input").value), + "showcase": document.querySelector("#modview-route-showcase>input").value, + "user_name": document.querySelector("#modview-route-name>input").value + } + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{ + method: 'POST', + headers: {Authorization: token}, + body: JSON.stringify(payload) + }).then(r=>window.location.reload()) + } +} + +function deleteRoute(){ +if(data.summary.routes[0].category==='') +{window.alert("no run selected")}else{ +if(window.confirm(`Are you sure you want to delete this run from the database? +${data.summary.routes[selectedRun].category.name} ${data.summary.routes[selectedRun].history.score_count} portals ${data.summary.routes[selectedRun].history.runner_name}`)===true){ + console.log("deleted:",selectedRun) + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{ + method: 'DELETE', + headers: {Authorization: token}, + body: JSON.stringify({"route_id":data.summary.routes[selectedRun].route_id}) + }).then(r=>window.location.reload()) +}} + +} + +const [showButton, setShowButton] = React.useState(1) +const modview = document.querySelector("div#modview") +React.useEffect(()=>{ + if(modview!==null){ + showButton ? modview.style.transform="translateY(-68%)" + : modview.style.transform="translateY(0%)" + } + let modview_block = document.querySelector("#modview_block") + showButton===1?modview_block.style.display="none":modview_block.style.display="block"// eslint-disable-next-line +},[showButton]) + +const [md,setMd] = React.useState("") + +return ( + <> +
+
+
+ + + + +
+
+ {showButton ?( + + ) : ( + + )} +
+
+ {menu!==0? ( +
+ {menu===1? ( + // image +
+
+ current image: + missing +
+ +
+ new image: + + compressImage(e.target.files[0]) + .then(d=>setImage(d)) + }/> + {image!==null?():} + + +
+
+ ):menu===2?( + // edit route +
+
+ route id: + +
+
+ runner name: + +
+
+ score: + +
+
+ date: + +
+
+ showcase video: + +
+
+ description: + +
+ +
+ ):menu===3?( + // add route +
+
+ category: + +
+
+ runner name: + +
+
+ score: + +
+
+ date: + +
+
+ showcase video: + +
+
+ description: + +
+ +
+ ):("error")} + + {menu!==1?( +
+ Markdown preview + documentation + demo +

+ {md} + +

+
+ ):""} +
):""} + + +) +} + -- cgit v1.2.3