completed

radek-stary · Sep 26, 2022 · 0287996 · 0287996
1 parent 1b0145a
commit 0287996
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 19 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="overflow: hidden;" >
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -51,9 +51,9 @@
     -->
     <title>IGO map</title>
   </head>
-  <body>
+  <body style="height: 100%">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="height: 100%" ></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.tsx b/src/App.tsx
@@ -28,19 +28,21 @@ function App() {
 
 
   return (
-    <div className="App">
+    <div className="App" style={{overflow: "auto", height: "100%"}} >
       <div className=" flex flex-row ">
         <SearchBar triggerIntroductionModal = {triggerIntroductionModal} changeCurrentOrg={changeCurrentOrg}></SearchBar>
         <div className=' w-full'>
           <Map currentOrganization={curentOrg} ></Map> 
           {curentOrg ? <OrganizationInfo currentOrganization = {curentOrg} ></OrganizationInfo> : <></> }
-        </div> 
-      </div>
-      <div className=' flex flex-row  h-fit w-fit sticky left-full m-7 bottom-5 '>
-      <div onClick={triggerIntroductionModal} className=' m-2  w-fit p-4 h-fit bg-slate-100 bg-opacity-80 hover:bg-slate-600 hover:cursor-pointer rounded-full'><InformationCircleIcon className=' scale-125 h-5 w-5'/></div>
-      <IntroductionModal triggerIntroductionModal = {triggerIntroductionModal} open = {introductionModalOpen}></IntroductionModal>
-      {curentOrg ? <EditModal currentOrganization={curentOrg}></EditModal> : <></>}
+        </div>
+        <div className= {' flex flex-row  h-fit w-fit fixed right-0 m-7 bottom-5 ' } style = {{alignSelf: "flex-start"}}>
+          <div onClick={triggerIntroductionModal} className=' m-2 w-fit p-4 h-fit bg-slate-100 bg-opacity-80 hover:bg-slate-600 hover:cursor-pointer rounded-full'><InformationCircleIcon className=' scale-125 h-5 w-5'/></div>
+          <IntroductionModal triggerIntroductionModal = {triggerIntroductionModal} open = {introductionModalOpen}></IntroductionModal>
+          {curentOrg ? <EditModal currentOrganization={curentOrg}></EditModal> : <></>}
+        </div>
+
       </div>
+
     </div>
   );
 }

diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
@@ -1,7 +1,7 @@
 import { Feature} from 'geojson';
 import Control from 'react-leaflet-custom-control'
 import { MapContainer, TileLayer, Popup, GeoJSON } from 'react-leaflet'
-import {useState} from 'react'
+import {useState, useEffect} from 'react'
 import MapSettings from "./MapSettings"
 
 //leaflet coordinates for all states in the world
@@ -24,6 +24,10 @@ interface MapTheme {
 const Map = ({currentOrganization } : mapProps) => {
 
   const [mapHovered, setMapHovered] = useState(false)
+  const [fullscreenOn, setfullscreenOn] = useState(true)
+
+
+
 
   const [themes, setthemes] = useState([
     {name: "railway theme", url: 'https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=3f19809ebd064b10a80b4ea7d2035c35',
@@ -34,6 +38,12 @@ const Map = ({currentOrganization } : mapProps) => {
  },
   ])
 
+  //icon to make map fullscreen
+  const fullscreenIcon =   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-fullscreen" viewBox="0 0 16 16">
+    <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"/>
+  </svg>
+
+
   function changeTheme(index: number) {
     let themeCopy = themes;
     themeCopy = themeCopy.map((theme : MapTheme) =>{ 
@@ -90,14 +100,20 @@ const Map = ({currentOrganization } : mapProps) => {
     }) 
 
 
+  const fullScreenMapStyle = {top: 0, right: 0, bottom: 0, left: 0, width: "100%", height: "100%", zIndex: 5, position: "fixed", overflow: "hidden"}
+
+  const basicMapStyle = {width: "100%", height:  "80vh", zIndex: 5}
+
+    console.log(fullscreenOn);
+
   return (
-    <div onMouseEnter = {() => {setMapHovered(true)}} onMouseLeave = {() => {setMapHovered(false)}}>
-     <MapContainer  key={currentOrganization + selectedTheme.name} style = {{width: "100%", height: "80vh", zIndex: 5}} center={[49.505, 25.09]} zoom={5}>
+    <div onMouseEnter = {() => {setMapHovered(true)}}  onMouseLeave = {() => {setMapHovered(false)}}>
+     <MapContainer  key={currentOrganization + selectedTheme.name + String(fullscreenOn)}   style = {!fullscreenOn ?  basicMapStyle : fullScreenMapStyle}   center={[49.505, 25.09]} zoom={5}>
       <TileLayer  url ={selectedTheme.url}/>
 
   {
     membersWithoutStatus.map((e, index) => {
-      return <GeoJSON  key = {'membersWithoutStatus' + currentOrganization} {...membersWithoutStatusStyle} data = {e} >
+      return <GeoJSON  key = {'membersWithoutStatus' + currentOrganization + index} {...membersWithoutStatusStyle} data = {e} >
         <Popup>
         {e.properties ? ` ${e.properties.sovereignt} \n - full member` : "data of this country could not be loaded"}
         </Popup>
@@ -106,7 +122,7 @@ const Map = ({currentOrganization } : mapProps) => {
   }
   {
 
-    membersWithStatus.map((e, index) =>  <GeoJSON key = {'membersWithStatus' + currentOrganization} {...membersWithStatusStyle}  data = {e}>
+    membersWithStatus.map((e, index) =>  <GeoJSON key = {'membersWithStatus' + currentOrganization + index} {...membersWithStatusStyle}  data = {e}>
         <Popup>
           {e.properties ? `${e.properties.sovereignt} \n has ${e.properties.status} status in the organisation ` : "data of this country could not be loaded"}
         </Popup>
@@ -115,8 +131,20 @@ const Map = ({currentOrganization } : mapProps) => {
   }
     {/* the triggering icon */}
   <Control  prepend position='topright'>
-    {mapHovered ? <MapSettings  changeTheme={changeTheme} themes={themes} ></MapSettings> : <></>}
+    {mapHovered ? 
+      <div className='flex flex-row relative  mr-5 mt-4 '>
+
+          <MapSettings  changeTheme={changeTheme} themes={themes} ></MapSettings>
+          &nbsp;
+          &nbsp;
+          <div onClick={() => {setfullscreenOn(!fullscreenOn)}}   className=' p-3 h-fit w-fit bg-blue-400 bg-opacity-50  hover:cursor-pointer hover:bg-opacity-100 rounded-full'>{fullscreenIcon}</div>
+
+      </div> 
+      : 
+      <></>}
   </Control>
+
+
 </MapContainer>  
     </div>
   )

diff --git a/src/components/map/MapSettings.tsx b/src/components/map/MapSettings.tsx
@@ -32,7 +32,7 @@ const MapSettings = ({themes, changeTheme} : Props) => {
 
 
     return (
-    <Popover  className="relative  mr-6 mt-2 ">
+    <Popover  className=" ">
       <Popover.Button><div  onClick={() => {setmapSettingsOpen(!mapSettingsOpen)}} className='   p-3 h-fit bg-blue-400 bg-opacity-50  hover:cursor-pointer hover:bg-opacity-100 rounded-full'>{mapIcon}</div></Popover.Button>
 
       <Popover.Panel  className="-translate-x-1/3 border-slate-600 border-2 rounded absolute  overflow-y-auto overflow-x-visible   z-50 bg-slate-700">

diff --git a/src/components/searchbar/SearchBar.tsx b/src/components/searchbar/SearchBar.tsx
@@ -1,8 +1,9 @@
 import organisations from "../../data/IGOs.json"
 
-import {useState} from "react"
+import {ReactNode, useState} from "react"
 
 import React from 'react'
+import { JsxAttribute } from "typescript";
 
 // icon to hide the sidebar
 const arrowCircleLeft = <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -15,6 +16,8 @@ const arrowCircleRight = <svg xmlns="http://www.w3.org/2000/svg" className="h-5
 </svg>;
 
 
+
+
 interface searchBarProps {
   changeCurrentOrg: (org: string) => void,
   triggerIntroductionModal: () => void
@@ -67,9 +70,16 @@ return (
             org.match(new RegExp(searchValue, "i"))
           )
           .map((org: string, index) => {
+
+            let orgToShow : string|ReactNode = org!;
+
+            if(org === ""){
+              orgToShow = <code>clear map</code>
+            }
+
             return(      
               <div key={"serchbarAlliance" + index} className = {`hover:bg-blue-800 ${index % 2 ? "bg-gray-800": "bg-gray-600"}`}>
-              <p onClick={() => props.changeCurrentOrg(org)} className="p-3 cursor-pointer">{org}</p>
+              <p onClick={() => props.changeCurrentOrg(org)} className="p-3 cursor-pointer">{orgToShow}</p>
               </div>
             )
           }