diff options
Diffstat (limited to 'frontend/src/components/ModMenu.tsx')
| -rw-r--r-- | frontend/src/components/ModMenu.tsx | 39 |
1 files changed, 16 insertions, 23 deletions
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx index 1fe4239..a0945eb 100644 --- a/frontend/src/components/ModMenu.tsx +++ b/frontend/src/components/ModMenu.tsx | |||
| @@ -15,7 +15,7 @@ interface ModMenuProps { | |||
| 15 | const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | 15 | const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { |
| 16 | 16 | ||
| 17 | const [menu, setMenu] = React.useState<number>(0); | 17 | const [menu, setMenu] = React.useState<number>(0); |
| 18 | const [showButton, setShowButton] = React.useState(1) | 18 | const [showButton, setShowButton] = React.useState<boolean>(true); |
| 19 | 19 | ||
| 20 | const [routeContent, setRouteContent] = React.useState<ModMenuContent>({ | 20 | const [routeContent, setRouteContent] = React.useState<ModMenuContent>({ |
| 21 | id: 0, | 21 | id: 0, |
| @@ -120,13 +120,13 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 120 | 120 | ||
| 121 | const modview_block = document.querySelector("#modview_block") as HTMLElement | 121 | const modview_block = document.querySelector("#modview_block") as HTMLElement |
| 122 | if (modview_block) { | 122 | if (modview_block) { |
| 123 | showButton === 1 ? modview_block.style.display = "none" : modview_block.style.display = "block"// eslint-disable-next-line | 123 | showButton ? modview_block.style.display = "none" : modview_block.style.display = "block" |
| 124 | } | 124 | } |
| 125 | }, [showButton]) | 125 | }, [showButton]) |
| 126 | 126 | ||
| 127 | return ( | 127 | return ( |
| 128 | <div id="modview_bdlock"> | 128 | <> |
| 129 | 129 | <div id="modview_block" /> | |
| 130 | <div id='modview'> | 130 | <div id='modview'> |
| 131 | <div> | 131 | <div> |
| 132 | <button onClick={() => setMenu(1)}>Edit Image</button> | 132 | <button onClick={() => setMenu(1)}>Edit Image</button> |
| @@ -136,15 +136,13 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 136 | </div> | 136 | </div> |
| 137 | <div> | 137 | <div> |
| 138 | {showButton ? ( | 138 | {showButton ? ( |
| 139 | <button onClick={() => setShowButton(0)}>Show</button> | 139 | <button onClick={() => setShowButton(false)}>Show</button> |
| 140 | ) : ( | 140 | ) : ( |
| 141 | <button onClick={() => { setShowButton(1); setMenu(0) }}>Hide</button> | 141 | <button onClick={() => { setShowButton(true); setMenu(0); }}>Hide</button> |
| 142 | )} | 142 | )} |
| 143 | </div> | 143 | </div> |
| 144 | </div> | 144 | </div><div id='modview-menu'> |
| 145 | 145 | {// Edit Image | |
| 146 | <div id='modview-menu'> | ||
| 147 | { // Edit Image | ||
| 148 | menu === 1 && ( | 146 | menu === 1 && ( |
| 149 | <div id='modview-menu-image'> | 147 | <div id='modview-menu-image'> |
| 150 | <div> | 148 | <div> |
| @@ -157,19 +155,17 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 157 | <input type="file" accept='image/*' onChange={e => { | 155 | <input type="file" accept='image/*' onChange={e => { |
| 158 | if (e.target.files) { | 156 | if (e.target.files) { |
| 159 | compressImage(e.target.files[0]) | 157 | compressImage(e.target.files[0]) |
| 160 | .then(d => setImage(d)) | 158 | .then(d => setImage(d)); |
| 161 | } | 159 | } |
| 162 | } | 160 | }} /></span> |
| 163 | } /></span> | ||
| 164 | {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>} | 161 | {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>} |
| 165 | <img src={image} alt="" id='modview-menu-image-file' /> | 162 | <img src={image} alt="" id='modview-menu-image-file' /> |
| 166 | 163 | ||
| 167 | </div> | 164 | </div> |
| 168 | </div> | 165 | </div> |
| 169 | ) | 166 | )} |
| 170 | } | ||
| 171 | 167 | ||
| 172 | { // Edit Route | 168 | {// Edit Route |
| 173 | menu === 2 && ( | 169 | menu === 2 && ( |
| 174 | <div id='modview-menu-edit'> | 170 | <div id='modview-menu-edit'> |
| 175 | <div id='modview-route-id'> | 171 | <div id='modview-route-id'> |
| @@ -234,10 +230,9 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 234 | </p> | 230 | </p> |
| 235 | </div> | 231 | </div> |
| 236 | </div> | 232 | </div> |
| 237 | ) | 233 | )} |
| 238 | } | ||
| 239 | 234 | ||
| 240 | { // Add Route | 235 | {// Add Route |
| 241 | menu === 3 && ( | 236 | menu === 3 && ( |
| 242 | <div id='modview-menu-add'> | 237 | <div id='modview-menu-add'> |
| 243 | <div id='modview-route-category'> | 238 | <div id='modview-route-category'> |
| @@ -313,11 +308,9 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 313 | </p> | 308 | </p> |
| 314 | </div> | 309 | </div> |
| 315 | </div> | 310 | </div> |
| 316 | ) | 311 | )} |
| 317 | } | ||
| 318 | </div> | 312 | </div> |
| 319 | 313 | </> | |
| 320 | </div> | ||
| 321 | ); | 314 | ); |
| 322 | }; | 315 | }; |
| 323 | 316 | ||