Skip to content

Commit

Permalink
the last changes are done and completed refresh is working properly
Browse files Browse the repository at this point in the history
  • Loading branch information
unknown committed Sep 24, 2022
1 parent 6c9d148 commit 1b0145a
Show file tree
Hide file tree
Showing 13 changed files with 498 additions and 943 deletions.
1,167 changes: 401 additions & 766 deletions package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@
"@types/react-dom": "^17.0.13",
"country-json": "^1.1.2",
"emailjs": "^4.0.0",
"flowbite": "^1.4.7",
"flowbite-react": "^0.1.3",
"flowbite-react": "^0.1.10",
"fs": "^0.0.1-security",
"geojson": "^0.5.0",
"leaflet": "^1.7.1",
Expand Down Expand Up @@ -63,7 +62,7 @@
"dependency-cruiser": "^11.11.0",
"postcss": "^8.4.14",
"tailwind": "^4.0.0",
"tailwindcss": "^3.1.5"
"tailwindcss": "^3.1.8"
},
"compilerOptions": {
"useUnknownInCatchVariables": false
Expand Down
7 changes: 3 additions & 4 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ function App() {
setcurentOrg(org);
}

//introduction modal with text about the applicaiton
const [introductionModalOpen, setintroductionModalOpen] = useState(false)


function triggerIntroductionModal() {
setintroductionModalOpen(!introductionModalOpen)
}
Expand All @@ -31,16 +32,14 @@ function App() {
<div className=" flex flex-row ">
<SearchBar triggerIntroductionModal = {triggerIntroductionModal} changeCurrentOrg={changeCurrentOrg}></SearchBar>
<div className=' w-full'>
<Map currentOrganization={curentOrg}></Map>
<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> : <></>}
{/* TODO: add theme change modal :) */}
{/* <ThemeChangeModal theme = {}></ThemeChangeModal> */}
</div>
</div>
);
Expand Down
93 changes: 44 additions & 49 deletions src/components/map/Map.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Feature, FeatureCollection, Geometry, GeoJsonProperties} from 'geojson';
import { Feature} from 'geojson';
import Control from 'react-leaflet-custom-control'
import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet'
import {useEffect, createRef, useState} from 'react'
import { MapContainer, TileLayer, Popup, GeoJSON } from 'react-leaflet'
import {useState} from 'react'
import MapSettings from "./MapSettings"

//leaflet coordinates for all states in the world
Expand All @@ -10,34 +10,49 @@ import world_countries_featureCollection from '../../data/world_countries_featu
//object of inter governmental organisations (IGOs), each organisation is an array in the structure [ state, status in IGO]
import organizations from "../../data/IGOs.json"

interface MapTheme {
name: string,
url: string,
selected: boolean,
memberCountriesColor: string,
memberCountriesWithStatusColor: string
}

interface mapProps {
currentOrganization: string;
currentOrganization: string
}
const Map = (props : mapProps) => {

const Map = ({currentOrganization } : mapProps) => {

const [mapHovered, setMapHovered] = useState(false)
const [mapSettingsOpen, setmapSettingsOpen] = useState(false)


const [themes, setthemes] = useState([
{name: "wau", color: "red", url: "www.wau.com", selected: false, memberCountriesColor: "rgb(30 58 138)", memberCountriesWithStatusColor: "rgb(30 58 138)"},
{name: "dark theme", color: "gree", url: "www.wau.com", selected: false, memberCountriesColor: "rgb(30 58 138)", memberCountriesWithStatusColor: "rgb(30 58 138)"},
{name: "cool", color: "blue", url: "www.wau.com", selected: false, memberCountriesColor: "rgb(30 58 138)", memberCountriesWithStatusColor: "rgb(30 58 138)"},
{name: "dark blue theme", color: "blue", url: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'", selected: true, memberCountriesColor: "rgb(30 58 138)", memberCountriesWithStatusColor: "rgb(30 58 138)"},
{name: "railway theme", url: 'https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=3f19809ebd064b10a80b4ea7d2035c35',
selected: false, memberCountriesColor: "red", memberCountriesWithStatusColor: "purple",
},
{name: "dark blue theme", url: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png", selected: true, memberCountriesColor: "rgb(30 58 138)",
memberCountriesWithStatusColor: "rgb(30 58 138)",
},
])




function changeTheme(index: number) {
let themeCopy = themes;
themeCopy = themeCopy.map((theme : MapTheme) =>{
theme.selected = false
return theme
})
themes[index].selected = true
setthemes(themeCopy)
}


//find selected theme by finding the one where selelcted property is true
const selectedTheme = themes[(themes.findIndex((theme: MapTheme) => theme.selected === true))]

let organizationMembersArray = organizations[props.currentOrganization as keyof typeof organizations];
let organizationMembersArray = organizations[currentOrganization as keyof typeof organizations];

const membersWithoutStatusStyle = {
style: {
"color": "rgb(30 58 138)",
"color": selectedTheme.memberCountriesColor,
"weight": 5,
"opacity": 0.6
}}
Expand All @@ -50,15 +65,14 @@ const Map = (props : mapProps) => {
)
.map(feature => feature as Feature)


const membersWithStatusStyle = {
style: {
"color": "rgb(30 58 138)",
"color": selectedTheme.memberCountriesWithStatusColor,
"weight": 5,
"opacity": 0.15
}}



const membersWithStatus: Feature[] = {...world_countries_featureCollection}.features
//filter if the country of feature is in the IGOs list of members
.filter(feature => organizationMembersArray.organizations
Expand All @@ -72,56 +86,37 @@ const Map = (props : mapProps) => {
feature = Object.assign(feature, {properties: featuresPropertiestWithStatus});
}
})
return feature as Feature

return feature as Feature
})


console.warn("WHATTTTTTTTTTTTTTTTTTTTTTTT");



return (
<div onMouseEnter = {() => {setMapHovered(true)}} onMouseLeave = {() => {setMapHovered(false)}}>
<MapContainer style = {{width: "100%", height: "80vh", zIndex: 5}} center={[49.505, 25.09]} zoom={5}>
<TileLayer
//this commented tile layer can be used for additional color theme
// attribution= {`&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors`}
//url='https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png?apikey=3f19809ebd064b10a80b4ea7d2035c35'
url ='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
/>

<MapContainer key={currentOrganization + selectedTheme.name} style = {{width: "100%", height: "80vh", zIndex: 5}} center={[49.505, 25.09]} zoom={5}>
<TileLayer url ={selectedTheme.url}/>

{
membersWithoutStatus.map((e, index) => {

return <GeoJSON key = {'membersWithoutStatus' + index + Math.random()} {...membersWithoutStatusStyle} data = {e} >
return <GeoJSON key = {'membersWithoutStatus' + currentOrganization} {...membersWithoutStatusStyle} data = {e} >
<Popup>
{e.properties ? ` ${e.properties.sovereignt} \n - full member` : "data of this country could not be loaded"}
</Popup>
</GeoJSON>
})
}
{
membersWithStatus.map((e, index) => {
console.log("Everbody wants to rule the world with the freaking status", membersWithoutStatus);

return <GeoJSON key = {'membersWithStatus' + index + Math.random()} {...membersWithStatusStyle} data = {e}>

membersWithStatus.map((e, index) => <GeoJSON key = {'membersWithStatus' + currentOrganization} {...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>
</GeoJSON>
})
)
}

{/* the triggering icon */}
<Control prepend position='topright'>

{mapHovered ? <MapSettings themes={themes} ></MapSettings> : <></>}

<Control prepend position='topright'>
{mapHovered ? <MapSettings changeTheme={changeTheme} themes={themes} ></MapSettings> : <></>}
</Control>



</MapContainer>
</div>
)
Expand Down
41 changes: 16 additions & 25 deletions src/components/map/MapSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Popover } from '@headlessui/react'

interface MapTheme {
name: string,
color: string,
url: string,
selected: boolean,
memberCountriesColor: string,
Expand All @@ -13,44 +12,36 @@ interface MapThemes extends Array<MapTheme>{}


interface Props {
themes : MapThemes
themes : MapThemes,
changeTheme: (index: number) => void
}




const MapSettings = ({themes} : Props) => {
const MapSettings = ({themes, changeTheme} : Props) => {

const [mapSettingsOpen, setmapSettingsOpen] = React.useState(false)

const [mapSettingsOpen, setmapSettingsOpen] = React.useState(true)

const mapIcon = <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
const mapIcon = <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
</svg>;

themes.map((theme: MapTheme) => {
console.log(
`outline outline-${theme.color}-500 hover:outline-${theme.color}-700 m-5 text-white font-bold py-2 px-4 rounded` + (theme.selected ? `bg-${theme.color}-500` : "")
)
})




return (
<div>

<Popover className="relative m-3 ">
<Popover.Button><div onClick={() => {setmapSettingsOpen(!mapSettingsOpen)}} className=' m-2 w-fit p-4 h-fit bg-blue-400 bg-opacity-80 hover:cursor-pointer hover:bg-opacity-100 rounded-full'>{mapIcon}</div></Popover.Button>

<Popover.Panel className="absolute -translate-x-1/3 z-10 bg-slate-700 ">
<div className="flex flex-col">
{themes.map((theme: MapTheme) => {
return <button className= {`outline outline-${theme.color}-500 hover:outline-${theme.color}-700 m-5 text-white font-bold py-2 px-4 rounded ` + (theme.selected ? `bg-${theme.color}-500` : "") } >{theme.name}</button>
})}
<button className= "outline outline-yellow-500 hover:outline-yellow-700 m-5 text-white font-bold py-2 px-4 rounded" >Railway theme</button>
<button className='outline outline-blue-700 hover:outline-blue-800 m-5 text-white font-bold py-2 px-4 rounded'>Dark blue theme</button>
</div>
<Popover className="relative mr-6 mt-2 ">
<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">
<ul className="max-h-44 ">
{themes.map((theme: MapTheme, index) => <li onClick={() => {changeTheme(index)}} key = {"mapThemeButton" + index} className= {`cursor-pointer border-slate-600 border-2 text-slate-100 text-center py-2 px-5 z-50 overflow-x-visible hover:bg-slate-500 ${theme.selected ? `border-blue-500 bg-slate-500 border ` : ""}`} >{theme.name}</li >)}
</ul>
</Popover.Panel>
</Popover>
</div>

)
}

Expand Down
35 changes: 1 addition & 34 deletions src/components/modals/IntroductionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,7 @@ const cancelButtonRef = useRef(null)
<hr className='my-4' />
<span className='text-gray-500'>created by <a className='underline' href = "myPortfolio.com">Radek Starý</a></span>
</p>

</div>

</div>
</div>
</div>

Expand All @@ -89,35 +87,4 @@ const cancelButtonRef = useRef(null)



// <div style={{width: "80px", overflow: 'hidden'}}>
// <>
// <Modal
// show={open}
// onClose={onClick}
// >
// <Modal.Header>
// About fact book
// </Modal.Header>
// <Modal.Body>
// <div className="space-y-6">
// <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
// Dear visitor, this webpage was created to showcase various IGOs (inter-governmental organisations)
// </p>
// <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
// Data were scraped from cia world fact book in the year 2020 so there might be some inaccuracies
// </p>
// </div>
// </Modal.Body>
// <Modal.Footer>
// <Button onClick={onClick}>
// Got it
// </Button>

// </Modal.Footer>
// </Modal>
// </>
// </div>



export default IntroductionModal
29 changes: 11 additions & 18 deletions src/components/organizationinfo/MembersDataFromJson.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,40 +27,37 @@ const MembersDataFromJson = (props : membersDataFromJsonProps) => {
member[1] === ""
)

const currentOrganizationCountriesInfoWithStatus = worldCountriesInformation.filter(countryData =>
currentOrganizationMembersWithStatus
.map(member => member[0])
.includes(countryData.country)
)


const currentOrganizationCountriesInfoWithStatuses : any = {}

Object.keys(organizationsWithStatusesSeparated).map(key => {
Object.keys(organizationsWithStatusesSeparated).forEach(key => {
currentOrganizationCountriesInfoWithStatuses[key] = worldCountriesInformation.filter(countryData =>
organizationsWithStatusesSeparated[key]
.includes(countryData.country)
)})




const currentOrganizationCountriesInfoWithoutStatus = worldCountriesInformation.filter(countryData =>
currentOrganizationMembersWithoutStatus
.map(member => member[0])
.includes(countryData.country)
)


const cityIcon = <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clipRule="evenodd" />
</svg>

const populationIcon = <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
</svg>

return (
<div className=' flex flex-col' style={{maxHeight: "20%"}}>
<h1 className=' text-2xl m-2 text-slate-200 uppercase'>full members</h1>
<div className=' grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-4 rounded-lg mb-6'>
{currentOrganizationCountriesInfoWithoutStatus.map((element, index) => {

console.log(element.flag_base64, "logging element.flag_base64");


return <span className=' bg-gradient-to-b from-slate-900 to-slate-800 rounded-sm' key = {"country-" + index}>
<h1 className='text-lg text-blue-800'>{element.country}</h1>
<p data-tooltip-target="tooltip-continent">{element.continent}</p>
Expand All @@ -70,9 +67,7 @@ const MembersDataFromJson = (props : membersDataFromJsonProps) => {
</div>

<p data-tooltip-target="tooltip-city" className='flex justify-center gap-2 text-amber-900 '>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clipRule="evenodd" />
</svg>
{cityIcon}
{element.city}
</p>
<div id="tooltip-city" role="tooltip" className="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
Expand All @@ -81,9 +76,7 @@ const MembersDataFromJson = (props : membersDataFromJsonProps) => {
</div>

<p data-tooltip-target="tooltip-population" className=' text-green-800 flex justify-center gap-2 ' >
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
</svg>
{populationIcon}
{element.population}
</p>

Expand Down
Loading

0 comments on commit 1b0145a

Please sign in to comment.