@eeacms/volto-n2k 0.1.1

package/src/components/manage/Blocks/SiteBanner/View.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { Grid } from 'semantic-ui-react';
+import './style.less';
+
+const isNumber = (number) => {
+  return typeof number === 'number' && !isNaN(number);
+};
+
+const View = (props) => {
+  const provider_data = props.provider_data || {};
+  const {
+    country_name,
+    site_name,
+    designation = [],
+    cdda_designation_national_language = [],
+    site_type = [],
+    site_code = [],
+    area_km2 = [],
+    area_ha = [],
+    year_stablished = [],
+    number_protected_habitat_types = [],
+    number_protected_species = [],
+    major_ecosystem_type = [],
+  } = provider_data;
+
+  if (!site_code[0]) return '';
+  return (
+    <div className="site-banner full-width">
+      <div className="ui container">
+        <Grid columns="equal">
+          <Grid.Column style={{ paddingBottom: 0 }} computer="12" mobile="12">
+            <h2 className="country-title">{site_name}</h2>
+            <p className="site-name">{country_name}</p>
+            {designation ? (
+              <p className="site-designation">{designation}</p>
+            ) : (
+              ''
+            )}
+          </Grid.Column>
+          <Grid.Column style={{ paddingTop: 0 }} computer="8" mobile="12">
+            <div className="site-details-wrapper">
+              {site_type[0] === 'CDDA' && (
+                <>
+                  <div className="site-detail">
+                    <div className="upper">
+                      {cdda_designation_national_language[0] ? (
+                        <div>{cdda_designation_national_language}</div>
+                      ) : (
+                        <div>-</div>
+                      )}
+                    </div>
+                    <div className="lower">Designation (National Language)</div>
+                  </div>
+
+                  <div className="site-detail">
+                    <div className="upper">
+                      {designation[0] ? <div>{designation}</div> : <div>-</div>}
+                    </div>
+                    <div className="lower">Designation (English)</div>
+                  </div>
+                </>
+              )}
+
+              <div className="site-detail">
+                <div className="upper">
+                  {site_code[0] ? <div>{site_code}</div> : <div>-</div>}
+                </div>
+                <div className="lower">Site code</div>
+              </div>
+
+              <div className="site-detail">
+                <div className="upper">
+                  {isNumber(area_km2[0]) || isNumber(area_ha[0]) ? (
+                    area_km2 > 1 ? (
+                      <div>
+                        {area_km2} km<sup>2</sup>
+                      </div>
+                    ) : (
+                      <div>{area_ha} ha</div>
+                    )
+                  ) : (
+                    <div>No data</div>
+                  )}
+                </div>
+                <div className="lower">Reported area</div>
+              </div>
+
+              <div className="site-detail">
+                <div className="upper">
+                  {year_stablished[0] ? (
+                    <div>{year_stablished}</div>
+                  ) : (
+                    <div>-</div>
+                  )}
+                </div>
+                <div className="lower">Year established</div>
+              </div>
+
+              {site_type[0] === 'CDDA' && (
+                <div className="site-detail">
+                  <div className="upper">
+                    {major_ecosystem_type[0] ? (
+                      <div>{major_ecosystem_type}</div>
+                    ) : (
+                      <div>-</div>
+                    )}
+                  </div>
+                  <div className="lower">Ecosystem</div>
+                </div>
+              )}
+
+              {site_type[0] === 'Natura2000' && (
+                <>
+                  <div className="site-detail">
+                    <div className="upper">
+                      {isNumber(number_protected_habitat_types[0]) ? (
+                        <div>{number_protected_habitat_types}</div>
+                      ) : (
+                        <div>No data</div>
+                      )}
+                    </div>
+                    <div className="lower">EU Protected habitats</div>
+                  </div>
+
+                  <div className="site-detail">
+                    <div className="upper">
+                      {isNumber(number_protected_species[0]) ? (
+                        <div>{number_protected_species}</div>
+                      ) : (
+                        <div>No data</div>
+                      )}
+                    </div>
+                    <div className="lower">EU Protected species</div>
+                  </div>
+                </>
+              )}
+            </div>
+          </Grid.Column>
+          <Grid.Column computer="4" mobile="12">
+            {/*map svg here*/}
+          </Grid.Column>
+        </Grid>
+      </div>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/SiteBanner/index.js

@@ -0,0 +1,17 @@
+import SiteBannerView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      site_banner: {
+        view: SiteBannerView,
+        getSchema: getSchema,
+        title: 'Site banner',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/SiteBanner/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Site banner',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/SiteBanner/style.less

@@ -0,0 +1,106 @@
+.site-banner {
+  padding: 1.5em 0;
+  background-color: #04a77d;
+  color: #fff;
+  font-family: 'RajdhaniB';
+
+  .ui.container > * {
+    margin-bottom: 0 !important;
+  }
+
+  .block .ui.image {
+    width: auto;
+  }
+
+  .country-title {
+    margin-top: 0.5em !important;
+    margin-bottom: 0 !important;
+    color: #fff;
+    font-family: inherit;
+    font-size: 54px;
+    line-height: 54px;
+    text-transform: uppercase;
+  }
+
+  .site-name {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-family: 'RajdhaniR';
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 18px;
+
+    .info-icon {
+      display: flex;
+      align-items: center;
+      margin-left: 15px;
+      filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.4));
+
+      &:hover {
+        .description {
+          max-width: 300px;
+          transition: max-width 0.4s;
+        }
+      }
+
+      svg {
+        z-index: 1;
+      }
+
+      .description {
+        z-index: 0;
+        overflow: hidden;
+        width: auto;
+        max-width: 0;
+        margin-left: -1rem;
+        color: #eb9700;
+        font-family: 'RajdhaniR';
+        font-size: 14px;
+        line-height: 14px;
+        transition: max-width 0.3s;
+
+        span {
+          display: inline-block;
+          padding: 4px 1rem 4px 1.5rem;
+          border: 1px solid #707070;
+          background: #fff;
+          border-radius: 10px;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .site-designation {
+    font-family: 'RajdhaniR';
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
+  .site-details-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .site-detail {
+    flex: 0 1 30%;
+    padding-right: 1em;
+    margin-top: 3em;
+
+    .upper {
+      margin-bottom: 0.2em;
+      font-size: 39px;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .lower {
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 1;
+      text-transform: uppercase;
+    }
+  }
+}

package/src/components/manage/Blocks/SiteHabitatsList/View.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import { Link } from 'react-router-dom';
+import cx from 'classnames';
+import { getObjectByIndex } from '@eeacms/volto-n2k/helpers';
+import downKeySVG from '@plone/volto/icons/down-key.svg';
+import upKeySVG from '@plone/volto/icons/up-key.svg';
+import './style.less';
+
+const View = (props) => {
+  const [habitats, setHabitats] = React.useState({});
+  const [selectedHabitat, setSelectedHabitat] = React.useState(null);
+  const { provider_data = {}, placeholder = 'No results' } = props;
+
+  React.useEffect(() => {
+    const newHabitats = {};
+    if (provider_data?.habitat_group?.length) {
+      provider_data.habitat_group.forEach((habitat, index) => {
+        if (!newHabitats[habitat]) {
+          newHabitats[habitat] = [];
+        }
+        newHabitats[habitat].push(getObjectByIndex(provider_data, index));
+      });
+    }
+    setHabitats(newHabitats);
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(provider_data)]);
+
+  return (
+    <div className="site-habitats-list">
+      {Object.keys(habitats)?.length ? (
+        Object.keys(habitats)
+          .sort()
+          .map((habitat) => (
+            <div className="habitat" key={habitat}>
+              <div
+                className={cx({
+                  'habitat-toolbar': true,
+                  marginless: selectedHabitat !== habitat,
+                })}
+              >
+                <div className="habitat-name">
+                  <h3>{habitat}</h3>
+                  <p className="count">{habitats[habitat].length}</p>
+                </div>
+                <Icon
+                  name={selectedHabitat === habitat ? upKeySVG : downKeySVG}
+                  onClick={(e) => {
+                    setSelectedHabitat(
+                      selectedHabitat === habitat ? null : habitat,
+                    );
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                  color="#8C8C8C"
+                  size="32px"
+                />
+              </div>
+
+              {selectedHabitat === habitat
+                ? habitats[habitat].map((item, index) => (
+                    <div
+                      className="habitat-item"
+                      key={`${habitat}-${index}-item`}
+                    >
+                      <Link
+                        className="description"
+                        to={`/natura2000/habitats/h/${item.code_2000}`}
+                      >
+                        {item.habitat_description}
+                      </Link>
+                      <p className="coverage">
+                        {item.coverage_ha.toFixed(2)} ha (
+                        {(item.coverage_ha / 100).toFixed(4)} km
+                        <sup>2</sup>)
+                      </p>
+                    </div>
+                  ))
+                : ''}
+            </div>
+          ))
+      ) : (
+        <p>{placeholder}</p>
+      )}
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/SiteHabitatsList/index.js

@@ -0,0 +1,17 @@
+import SiteHabitatsList from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      site_habitats_list: {
+        view: SiteHabitatsList,
+        getSchema: getSchema,
+        title: 'Site habitats list',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/SiteHabitatsList/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Site habitats list',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/SiteHabitatsList/style.less

@@ -0,0 +1,70 @@
+.site-habitats-list {
+  .icon {
+    cursor: pointer;
+  }
+
+  .habitat {
+    padding: 1rem 2rem;
+    border: 1px solid #e8e8e8;
+    margin-bottom: 1rem;
+    background-color: #fff;
+    border-radius: 10px;
+
+    .habitat-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+
+      &.marginless {
+        margin-bottom: 0;
+      }
+    }
+
+    .habitat-name {
+      display: flex;
+      align-items: center;
+
+      h3 {
+        margin-right: 1rem;
+        margin-bottom: 0;
+        color: #013c60;
+        font-weight: 400;
+        line-height: 25px;
+      }
+
+      .count {
+        width: 24px;
+        height: 24px;
+        margin-bottom: 0;
+        background-color: #04a87d;
+        border-radius: 6px;
+        color: #fff;
+        font-weight: bold;
+        line-height: 24px;
+        text-align: center;
+      }
+    }
+
+    .habitat-item {
+      .description {
+        color: #013c60;
+        font-size: 1.2rem;
+        font-weight: 400;
+
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+
+      .coverage {
+        color: #8c8c8c;
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+      margin-bottom: 1rem;
+    }
+  }
+}

package/src/components/manage/Blocks/SiteProtectedHabitats/View.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import { getObjectByIndex } from '@eeacms/volto-n2k/helpers';
+
+import './style.less';
+
+const View = (props) => {
+  const [habitats, setHabitats] = React.useState({});
+  const provider_data = props.provider_data || {};
+
+  React.useEffect(() => {
+    const newHabitats = {};
+    if (provider_data?.habitat_group?.length) {
+      provider_data.habitat_group.forEach((habitat, index) => {
+        if (!newHabitats[habitat]) {
+          newHabitats[habitat] = [];
+        }
+        newHabitats[habitat].push(getObjectByIndex(provider_data, index));
+      });
+    }
+    setHabitats(newHabitats);
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(provider_data)]);
+
+  return (
+    <div className="habitats-banner full-width">
+      <div className="habitats-container">
+        <Container className="habitats-wrapper">
+          <div className="habitats-wrapper">
+            {Object.entries(habitats).map(([habitat, items], index) => (
+              <div key={index} className="habitat-box">
+                <div className="upper">
+                  <span>{items.length}</span>
+                </div>
+                <div className="lower">
+                  <span>{habitat}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Container>
+      </div>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/SiteProtectedHabitats/index.js

@@ -0,0 +1,17 @@
+import SiteProtectedHabitatsView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      site_protected_habitats: {
+        view: SiteProtectedHabitatsView,
+        getSchema: getSchema,
+        title: 'Site protected habitats',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/SiteProtectedHabitats/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Site protected habitats',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/SiteProtectedHabitats/style.less

@@ -0,0 +1,90 @@
+@import (multiple, reference, optional) '../../theme.config';
+@type: extra;
+@element: custom;
+
+div#view .ui.container.habitats-wrapper > * {
+  margin-bottom: 0;
+}
+
+.habitats-banner {
+  position: relative;
+  height: 320px;
+  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.7)),
+    url('./images/background.webp');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-family: 'RajdhaniB';
+
+  .habitats-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  .habitats-wrapper {
+    display: flex;
+    flex-flow: row;
+    margin: 0 auto !important;
+    overflow-x: auto;
+  }
+
+  .habitats-wrapper:before,
+  .habitats-wrapper:after {
+    flex: 1;
+    content: '';
+  }
+
+  .habitat-box {
+    margin: 0.5em 1.5em;
+
+    .upper {
+      position: relative;
+      width: 110px;
+      height: 110px;
+      margin: auto;
+      background-color: #eaeaea;
+      border-radius: 50%;
+
+      > span {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: #013c60;
+        font-family: inherit;
+        font-size: 55px;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .lower {
+      margin-top: 1em;
+      text-align: center;
+
+      span {
+        color: #fff;
+        font-family: inherit;
+        font-size: 19px;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: @largeMonitorBreakpoint) {
+  .habitats-banner {
+    .habitat-box {
+      width: 100px;
+
+      .upper {
+        width: 80px;
+        height: 80px;
+
+        span {
+          font-size: 40px;
+        }
+      }
+    }
+  }
+}