Recycling POI block

src/components/ui/Flex.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+const Flex = ({ children, inline, className,
+  justifyContent,
+  alignItems = 'center',
+}) => {
+  const style = { justifyContent, alignItems };
+  return <div
+    style={style}
+    className={classnames('flex', { 'flex--inline': inline }, className)}>
+    {children}
+  </div>;
+};
+
+Flex.propTypes = {
+  justifyContent: PropTypes.oneOf(['space-between']),
+  alignItems: PropTypes.oneOf(['center']),
+};
+
+export default Flex;

src/components/ui/Meter.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const valueToColor = (colors, value) => {
+  const nextIndex = colors.findIndex(({ min }) => value < min);
+  return colors[(nextIndex === -1 ? colors.length : nextIndex) - 1].color;
+};
+
+const Meter = ({ value, colors, className }) =>
+  <div className={classnames('meter', className)}>
+    <div className="meter-valueBar" style={{
+      width: `${value}%`,
+      backgroundColor: valueToColor(colors, value),
+    }} />
+  </div>;
+
+Meter.propTypes = {
+  value: PropTypes.number.isRequired,
+  colors: PropTypes.arrayOf(PropTypes.shape({
+    min: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+  })).isRequired,
+  className: PropTypes.string,
+};
+
+export default Meter;

src/components/ui/Text.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import Flex from './Flex';
+
+const Text = ({ children, level, inline, icon, className, ...rest }) => {
+  let TagName;
+  const props = { ...rest };
+  if (icon) {
+    TagName = Flex;
+    props.inline = inline;
+    props.alignCenter = true;
+  } else {
+    TagName = inline ? 'span' : 'div';
+  }
+  return <TagName
+    className={classnames({ [`u-text--${level}`]: level }, className)}
+    {...props}
+  >
+    {icon && <i className={`u-mr-4 icon-${icon}`} />}
+    {children}
+  </TagName>;
+};
+
+Text.propTypes = {
+  level: PropTypes.oneOf(['caption', 'smallTitle', 'subtitle']),
+  icon: PropTypes.string,
+  children: PropTypes.node,
+  inline: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default Text;

src/components/ui/index.js

@@ -0,0 +1,26 @@
+import Button from './Button';
+import ContextMenu from './ContextMenu';
+import Flex from './Flex';
+import { ItemList, Item } from './ItemList';
+import MainActionButton from './MainActionButton';
+import Meter from './Meter';
+import Modal from './Modal';
+import Panel from './Panel';
+import PlaceholderText from './PlaceholderText';
+import Suggest from './Suggest';
+import Text from './Text';
+
+export {
+  Button,
+  ContextMenu,
+  Flex,
+  ItemList,
+  Item,
+  MainActionButton,
+  Meter,
+  Modal,
+  Panel,
+  PlaceholderText,
+  Suggest,
+  Text,
+};

src/panel/poi/PoiBlockContainer.jsx

@@ -7,6 +7,7 @@ import WebsiteBlock from './blocks/Website';
 import InformationBlock from './blocks/Information';
 import CovidBlock from './blocks/Covid19';
 import PhoneBlock from './blocks/Phone';
+import RecyclingBlock from './blocks/Recycling';
 
 export default class PoiBlockContainer extends React.Component {
   static propTypes = {
@@ -25,6 +26,7 @@ export default class PoiBlockContainer extends React.Component {
     const websiteBlock = blocks.find(b => b.type === 'website');
     const contactBlock = blocks.find(b => b.type === 'contact');
     const imagesBlock = blocks.find(b => b.type === 'images');
+    const recyclingBlock = blocks.find(b => b.type === 'recycling');
     const covidBlock = blocks.find(b => b.type === 'covid19');
     const displayCovidInfo = this.props.covid19Enabled && blocks.find(b => b.type === 'covid19');
 
@@ -35,6 +37,7 @@ export default class PoiBlockContainer extends React.Component {
       {hourBlock && <HourBlock block={hourBlock} covid19enabled={!!displayCovidInfo} />}
       {informationBlock && <InformationBlock block={informationBlock} />}
       {phoneBlock && <PhoneBlock block={phoneBlock} />}
+      {recyclingBlock && <RecyclingBlock block={recyclingBlock} />}
       {websiteBlock && <WebsiteBlock block={websiteBlock} poi={this.props.poi} />}
       {contactBlock && <ContactBlock block={contactBlock} />}
       {imagesBlock && <ImagesBlock block={imagesBlock} poi={this.props.poi} />}

src/panel/poi/blocks/Recycling.jsx

@@ -0,0 +1,56 @@
+/* globals _ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Text, Meter } from 'src/components/ui';
+
+const GREEN = '#87c966';
+const YELLOW = '#ffda12';
+const RED = '#ff3b4a';
+
+const containerTypes = type => {
+  return {
+    glass: _('Glass', 'recycling'),
+    recyclable: _('Recyclable', 'recycling'),
+  }[type] || _('Unknown', 'recycling');
+};
+
+const Container = ({ type, filling_level, updated_at }) =>
+  <div className="recycling-container">
+    <Text level="caption" icon="icon_clock" className="u-mb-8">
+      {_(
+        'Updated {datetime}',
+        'recycling', {
+          datetime: Intl.DateTimeFormat(window.getLang().locale.replace('_', '-'), {
+            year: 'numeric', month: 'numeric', day: 'numeric',
+            hour: 'numeric', minute: 'numeric',
+          }).format(new Date(updated_at)),
+        }
+      )}
+    </Text>
+    <Flex justifyContent="space-between">
+      <Text level="smallTitle">{containerTypes(type)}</Text>
+      <Text>{filling_level} %</Text>
+    </Flex>
+    <Meter value={filling_level} colors={[
+      { min: 0, color: GREEN },
+      { min: 50, color: YELLOW },
+      { min: 75, color: RED },
+    ]} />
+  </div>;
+
+const RecyclingBlock = ({ block }) => {
+  const containers = block?.containers;
+  if (containers.length === 0) {
+    return null;
+  }
+
+  return <div className="poi_panel__info__section recycling">
+    {containers.map((container, index) => <Container key={index} {...container} />)}
+  </div>;
+};
+
+RecyclingBlock.propTypes = {
+  block: PropTypes.object.isRequired,
+};
+
+export default RecyclingBlock;

src/scss/includes/components/flex.scss

@@ -0,0 +1,7 @@
+.flex {
+  display: flex;
+
+  &--inline {
+    display: inline-flex;
+  }
+}

src/scss/includes/components/meter.scss

@@ -0,0 +1,16 @@
+.meter {
+  width: 100%;
+  height: 4px;
+  margin: 7px 0;
+  background-color: $surface;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+
+  .meter-valueBar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+  }
+}

src/scss/includes/panels/poi_panel.scss

@@ -508,3 +508,4 @@ $HEADER_SIZE: 40px;
 
 @import "./covid";
 @import "./timetable";
+@import "./recycling";

src/scss/includes/panels/recycling.scss

@@ -0,0 +1,9 @@
+.recycling {
+  &-container {
+    padding: 1em 0;
+
+    & + & {
+      border-top: 1px solid $separator_color;
+    }
+  }
+}

src/scss/includes/ui_components.scss

@@ -3,3 +3,5 @@
 @import "./components/contextMenu";
 @import "./components/button";
 @import "./components/mainActionButton";
+@import "./components/meter";
+@import "./components/flex";

src/scss/includes/utils.scss

@@ -51,3 +51,11 @@
   color: $primary_text;
   font-weight: bold;
 }
+
+.u-mr-4 {
+  margin-right: 4px;
+}
+
+.u-mb-8 {
+  margin-bottom: 8px;
+}