crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-20 16:36:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add plans maps for index page

Browse Source
This commit is contained in:
Daniele Pancottini 2022-12-28 09:43:11 +01:00
parent 23afcd8e0a
commit 8e51ad7cd7
4 changed files with 365 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
site/pages/index.tsx
View File

@ -6,18 +6,19 @@ import { useDisclosure } from '@chakra-ui/react'
import PolygonModal from '@components/common/HomePage/PolygonModal/PolygonModal'
export default function Home() {
const imagePath = 'homepageBackgroundImage.png'
const { locale } = useRouter()
const imagePath = "homepageBackgroundImage.png";
const {locale} = useRouter();
const [mapContainerWidth, setMapContainerWidth] = useState<number | undefined>(600);
const [innerWidth, setInnerWidth] = useState<number | undefined>(600);
const [decadeClicked, setDecadeClicked] = useState<string>("12")
const [mapContainerWidth, setMapContainerWidth] = useState<
number | undefined
>(600)
const [innerWidth, setInnerWidth] = useState<number | undefined>(600)
const [decadeClicked, setDecadeClicked] = useState<string>('12')
const { isOpen, onOpen, onClose } = useDisclosure()
const mapDefinition = {
name: "my-map",
name: 'my-map',
areas: [
{
id: '12',
@ -25,10 +26,13 @@ export default function Home() {
name: '2000',
fillColor: '#eab54d4d',
strokeColor: 'black',
coords: [4653,1231,5039,1396,5204,1622,5218,2027,5039,2315,4709,2461,4276,2339,4068,2084,4040,1679,4177,1457,4337,1325],
shape: "poly",
//href: `/${locale}/abruzzo/12`,
href: "#",
coords: [
4634, 1239, 4945, 1320, 5162, 1541, 5252, 1857, 5176, 2149, 4941,
2385, 4630, 2474, 4319, 2385, 4092, 2154, 4017, 1833, 4097, 1541,
4323, 1324,
],
shape: 'poly',
href: '#',
},
{
id: '11',
@ -36,10 +40,12 @@ export default function Home() {
name: '1990',
fillColor: '#eab54d4d',
strokeColor: 'black',
coords: [3904,974,475],
shape: "circle",
//href: `/${locale}/abruzzo/12`,
href: "#",
coords: [
3909, 467, 4175, 549, 4363, 765, 4408, 1046, 4295, 1315, 4045, 1466,
3763, 1470, 3515, 1302, 3402, 1048, 3447, 759, 3626, 551,
],
shape: 'poly',
href: '#',
},
{
id: '10',
@ -47,37 +53,54 @@ export default function Home() {
name: '1980',
fillColor: '#eab54d4d',
strokeColor: 'black',
coords: [3045,611,387],
shape: "circle",
//href: `/${locale}/abruzzo/12`,
href: "#",
}
]
coords: [
3046, 207, 3280, 289, 3430, 486, 3430, 740, 3287, 952, 3044, 1032,
2799, 947, 2648, 740, 2646, 504, 2808, 279,
],
shape: 'poly',
href: '#',
},
],
}
useEffect(() => {
// Handler to call on window resize
function handleResize() {
setInnerWidth(window.innerWidth);
setInnerWidth(window.innerWidth)
}
window.addEventListener('resize', handleResize);
handleResize();
window.addEventListener('resize', handleResize)
handleResize()
return () => window.removeEventListener('resize', handleResize);
}, []);
return () => window.removeEventListener('resize', handleResize)
}, [])
useEffect(() => {
setMapContainerWidth(document.getElementById('mapContainer')?.clientWidth);
}, [innerWidth]);
setMapContainerWidth(document.getElementById('mapContainer')?.clientWidth)
}, [innerWidth])
return (
<>
<section id='mapContainer' className='w-full'>
<section id="mapContainer" className="w-full">
<div>
<ImageMapper natural stayHighlighted onClick={area => { setDecadeClicked(area.id!); onOpen() }} parentWidth={mapContainerWidth} responsive={true} src={imagePath} map={mapDefinition}></ImageMapper>
<PolygonModal key={decadeClicked} decade={decadeClicked} onModalClose={onClose} isOpen={isOpen} />
<ImageMapper
natural
stayHighlighted
onClick={(area) => {
setDecadeClicked(area.id!)
onOpen()
}}
parentWidth={mapContainerWidth}
responsive={true}
src={imagePath}
map={mapDefinition}
></ImageMapper>
<PolygonModal
key={decadeClicked}
decade={decadeClicked}
onModalClose={onClose}
isOpen={isOpen}
/>
</div>
</section>
</>

115
site/static_data/regions/abruzzo/10/plan/manifest.json
View File

@ -1,25 +1,92 @@
{
"name": "gfdfdg",
"areas": [
{
"id": "ffsdfsd",
"title": "2000",
"name": "2000",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [285,232,381,229,384,316,371,316,370,462,343,463,336,472,328,482,314,486,295,492,283,488,273,482,257,468,251,459,245,434,247,397,248,371,267,368,264,313,288,310,286,239],
"shape": "poly",
"href": "/abruzzo/10/0"
},
{
"id": "fdsf",
"title": "2000",
"name": "2000",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [14,63,111,64,110,184,88,186,82,212,38,212,38,187,13,186],
"shape": "poly",
"href": "/abruzzo/10/1"
}
]
}
"name": "10",
"areas": [
{
"id": "0",
"title": "Camera Adulti",
"name": "Camera Adulti",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
788, 914, 1129, 914, 1129, 1139, 1167, 1142, 1166, 1225, 1021, 1226,
1020, 1177, 787, 1175
],
"shape": "poly",
"href": "/abruzzo/10/0"
},
{
"id": "1",
"title": "Giardino",
"name": "Giardino",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [577, 282, 1128, 282, 1130, 905, 439, 905, 435, 504, 576, 504],
"shape": "poly",
"href": "/abruzzo/10/1"
},
{
"id": "2",
"title": "Corridoio",
"name": "Corridoio",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
245, 987, 439, 984, 439, 911, 779, 914, 780, 1183, 1012, 1184, 1013,
1226, 832, 1226, 831, 1435, 740, 1434, 739, 1088, 444, 1089, 444, 1235,
244, 1235
],
"shape": "poly",
"href": "/abruzzo/10/2"
},
{
"id": "3",
"title": "Garage",
"name": "Garage",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [243, 280, 567, 279, 567, 497, 431, 496, 431, 634, 244, 632],
"shape": "poly",
"href": "/abruzzo/10/3"
},
{
"id": "4",
"title": "Camera Ragazzi",
"name": "Camera Ragazzi",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [839, 1234, 1167, 1235, 1166, 1436, 840, 1436],
"shape": "poly",
"href": "/abruzzo/10/4"
},
{
"id": "5",
"title": "Bagno",
"name": "Bagno",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [243, 640, 430, 640, 430, 978, 243, 977],
"shape": "poly",
"href": "/abruzzo/10/5"
},
{
"id": "6",
"title": "Sala",
"name": "Sala",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [450, 1094, 731, 1094, 732, 1436, 452, 1436],
"shape": "poly",
"href": "/abruzzo/10/6"
},
{
"id": "7",
"title": "Cucina",
"name": "Cucina",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [44, 1240, 443, 1242, 443, 1437, 44, 1436],
"shape": "poly",
"href": "/abruzzo/10/7"
}
]
}

128
site/static_data/regions/abruzzo/11/plan/manifest.json
View File

@ -1,25 +1,105 @@
{
"name": "gfdfdg",
"areas": [
{
"id": "ffsdfsd",
"title": "2000",
"name": "2000",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [285,232,381,229,384,316,371,316,370,462,343,463,336,472,328,482,314,486,295,492,283,488,273,482,257,468,251,459,245,434,247,397,248,371,267,368,264,313,288,310,286,239],
"shape": "poly",
"href": "/abruzzo/11/0"
},
{
"id": "fdsf",
"title": "2000",
"name": "2000",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [14,63,111,64,110,184,88,186,82,212,38,212,38,187,13,186],
"shape": "poly",
"href": "/abruzzo/11/1"
}
]
}
"name": "11",
"areas": [
{
"id": "0",
"title": "Camera Adulti",
"name": "Camera Adulti",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [60, 617, 435, 618, 435, 933, 60, 932],
"shape": "poly",
"href": "/abruzzo/11/0"
},
{
"id": "1",
"title": "Giardino",
"name": "Giardino",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
1033, 569, 1384, 570, 1385, 704, 1700, 702, 1702, 1048, 981, 1046, 982,
989, 1033, 989
],
"shape": "poly",
"href": "/abruzzo/11/1"
},
{
"id": "2",
"title": "Corridoio",
"name": "Corridoio",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
461, 99, 590, 101, 539, 167, 536, 370, 570, 411, 782, 411, 782, 440,
660, 442, 581, 541, 578, 998, 630, 998, 630, 1049, 382, 1158, 357, 1158,
360, 938, 446, 939, 446, 608, 58, 606, 58, 446, 120, 532, 455, 533, 455,
398, 484, 395, 484, 250, 463, 245
],
"shape": "poly",
"href": "/abruzzo/11/2"
},
{
"id": "3",
"title": "Garage",
"name": "Garage",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
960, 101, 1402, 98, 1506, 152, 1703, 152, 1702, 693, 1393, 698, 1396,
490, 1067, 489, 1063, 395, 960, 400
],
"shape": "poly",
"href": "/abruzzo/11/3"
},
{
"id": "4",
"title": "Camera Ragazzi",
"name": "Camera Ragazzi",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
57, 101, 453, 101, 453, 257, 475, 256, 477, 389, 449, 391, 450, 530,
129, 530, 60, 431
],
"shape": "poly",
"href": "/abruzzo/11/4"
},
{
"id": "5",
"title": "Bagno",
"name": "Bagno",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [58, 939, 350, 939, 351, 1155, 109, 1156, 109, 1114, 60, 1070],
"shape": "poly",
"href": "/abruzzo/11/5"
},
{
"id": "6",
"title": "Sala",
"name": "Sala",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
660, 453, 956, 450, 1022, 518, 1024, 977, 973, 981, 973, 1046, 640,
1045, 640, 987, 588, 984, 591, 541
],
"shape": "poly",
"href": "/abruzzo/11/6"
},
{
"id": "7",
"title": "Cucina",
"name": "Cucina",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
602, 99, 790, 99, 791, 160, 951, 160, 950, 445, 793, 443, 790, 401, 573,
401, 545, 367, 546, 175
],
"shape": "poly",
"href": "/abruzzo/11/7"
}
]
}

139
site/static_data/regions/abruzzo/12/plan/manifest.json
View File

@ -1,25 +1,116 @@
{
"name": "gfdfdg",
"areas": [
{
"id": "ffsdfsd",
"title": "2000",
"name": "2000",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [285,232,381,229,384,316,371,316,370,462,343,463,336,472,328,482,314,486,295,492,283,488,273,482,257,468,251,459,245,434,247,397,248,371,267,368,264,313,288,310,286,239],
"shape": "poly",
"href": "/abruzzo/12/0"
},
{
"id": "fdsf",
"title": "2000",
"name": "2000",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [14,63,111,64,110,184,88,186,82,212,38,212,38,187,13,186],
"shape": "poly",
"href": "/abruzzo/12/1"
}
]
}
"name": "12",
"areas": [
{
"id": "0",
"title": "Camera Adulti",
"name": "Camera Adulti",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
70, 199, 346, 198, 345, 555, 271, 557, 270, 620, 156, 620, 154, 558, 70,
558
],
"shape": "poly",
"href": "/abruzzo/12/0"
},
{
"id": "1",
"title": "Giardino",
"name": "Giardino",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
70, 566, 142, 564, 143, 633, 372, 634, 375, 1007, 331, 1006, 329, 1111,
359, 1115, 362, 1174, 443, 1173, 357, 1316, 354, 1639, 70, 1638
],
"shape": "poly",
"href": "/abruzzo/12/1"
},
{
"id": "2",
"title": "Corridoio",
"name": "Corridoio",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
68, 95, 68, 186, 355, 191, 359, 563, 284, 563, 283, 622, 453, 624, 451,
598, 680, 598, 681, 640, 770, 642, 768, 937, 652, 940, 651, 1007, 692,
1007, 692, 1113, 651, 1113, 651, 1292, 728, 1294, 732, 1482, 888, 1487,
851, 1473, 822, 1455, 795, 1431, 774, 1406, 763, 1391, 766, 1103, 820,
1102, 822, 928, 877, 927, 880, 681, 969, 679, 971, 469, 692, 468, 688,
385, 490, 380, 489, 96
],
"shape": "poly",
"href": "/abruzzo/12/2"
},
{
"id": "3",
"title": "Garage",
"name": "Garage",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
504, 97, 916, 97, 1186, 216, 1184, 679, 984, 678, 981, 457, 704, 456,
703, 372, 504, 371
],
"shape": "poly",
"href": "/abruzzo/12/3"
},
{
"id": "4",
"title": "Camera Ragazzi",
"name": "Camera Ragazzi",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
465, 608, 670, 609, 672, 651, 760, 651, 757, 926, 387, 927, 386, 633,
465, 632
],
"shape": "poly",
"href": "/abruzzo/12/4"
},
{
"id": "5",
"title": "Bagno",
"name": "Bagno",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
386, 938, 640, 939, 640, 1018, 680, 1018, 682, 1103, 639, 1103, 638,
1165, 373, 1163, 371, 1103, 342, 1102, 341, 1018, 386, 1018
],
"shape": "poly",
"href": "/abruzzo/12/5"
},
{
"id": "6",
"title": "Sala",
"name": "Sala",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
457, 1175, 638, 1173, 639, 1304, 721, 1303, 720, 1484, 702, 1486, 702,
1640, 366, 1641, 366, 1320
],
"shape": "poly",
"href": "/abruzzo/12/6"
},
{
"id": "7",
"title": "Cucina",
"name": "Cucina",
"fillColor": "#eab54d4d",
"strokeColor": "black",
"coords": [
891, 691, 1184, 691, 1186, 953, 1147, 952, 1148, 1392, 1060, 1392, 1050,
1408, 1037, 1425, 1020, 1437, 1007, 1450, 991, 1458, 973, 1467, 961,
1470, 947, 1476, 933, 1476, 916, 1479, 901, 1476, 888, 1476, 866, 1469,
842, 1455, 824, 1444, 808, 1432, 796, 1419, 786, 1402, 779, 1387, 779,
1115, 830, 1115, 832, 940, 891, 940
],
"shape": "poly",
"href": "/abruzzo/12/7"
}
]
}