Add aircraft type icon to movement list header

src/components/AircraftTypeIcon/index.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from 'styled-components'
+import {icon as aircraftCategoryIcon} from '../../util/aircraftCategories'
+
+import plane from './img/plane.png'
+import jet from './img/jet.png'
+import helicopter from './img/helicopter.png'
+import glider from './img/glider.png'
+
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+`
+
+const StyledImg = styled.img`
+    opacity: 0.4;
+`
+
+const ICON_MAP = {
+  plane,
+  jet,
+  helicopter,
+  glider,
+}
+
+const JET_MTOW = 2550
+
+const getIconName = (aircraftCategory, mtow) => {
+  let iconName = aircraftCategoryIcon(aircraftCategory)
+
+  if ((!iconName || iconName === 'plane') && mtow > JET_MTOW) {
+    iconName = 'jet'
+  }
+
+  if (!iconName) {
+    iconName = 'plane'
+  }
+
+  return iconName
+}
+
+export default function AircraftTypeIcon({aircraftCategory, mtow}) {
+  const iconName = getIconName(aircraftCategory, mtow)
+  const iconSrc = ICON_MAP[iconName]
+  return (
+    <StyledWrapper>
+      <StyledImg src={iconSrc} width={35}/>
+    </StyledWrapper>
+  )
+}

src/components/MovementList/Action.js

@@ -10,7 +10,7 @@ const StyledAction = styled.span`
     `
     : `
       cursor: pointer;
-  
+
       &:hover {
         color: ${props.theme.colors.main};
       }
@@ -20,7 +20,7 @@ const StyledAction = styled.span`
 
 const ActionLabel = styled.span`
   ${props => props.responsive && `
-    @media (max-width: 980px) {
+    @media (max-width: 1200px) {
       display: none;
     }`
   }

src/components/MovementList/MovementHeader.js

@@ -7,6 +7,7 @@ import MaterialIcon from '../MaterialIcon';
 import HomeBaseIcon from './HomeBaseIcon';
 import {ACTION_LABELS, TYPE_LABELS} from './labels';
 import NoPaymentTag from './NoPaymentTag'
+import AircraftTypeIcon from '../AircraftTypeIcon'
 
 const ICON_HEIGHT = 30;
 
@@ -41,7 +42,12 @@ const ColumnsWrapper = styled.div`
   }
 
   .homebase {
+    width: 50px;
+  }
+
+  .aircraftType {
     flex: 0.5;
+    padding-right: 10px;
   }
 
   .pilot, .datetime, .location {
@@ -63,13 +69,19 @@ const ColumnsWrapper = styled.div`
     white-space: nowrap;
   }
 
-  @media (max-width: 980px) {
+  @media (max-width: 1200px) {
     .action, .delete {
       width: 40px;
       text-align: center;
     }
   }
 
+  @media (max-width: 980px) {
+    .aircraftType {
+      display: none;
+    }
+  }
+
   @media (max-width: 600px) {
     .location {
       display: none;
@@ -169,6 +181,9 @@ class MovementHeader extends React.PureComponent {
           <Column className="homebase" alignMiddle>
             <HomeBaseIcon isHomeBase={props.isHomeBase}/>
           </Column>
+          <Column className="aircraftType" alignMiddle>
+            <AircraftTypeIcon aircraftCategory={props.data.aircraftCategory} mtow={props.data.mtow}/>
+          </Column>
           <Column className="pilot" alignMiddle>{props.data.lastname}</Column>
           <Column className="datetime" alignMiddle={!date}>
             {date && <Date className="date">{date}</Date>}

src/util/aircraftCategories.js

@@ -2,10 +2,10 @@ const categories = [
   {name: 'Flugzeug', flightTypeAircraftType: 'aircraft'},
   {name: 'Eigenbauflugzeug', flightTypeAircraftType: 'aircraft'},
   {name: 'Motorsegler', flightTypeAircraftType: 'motor_glider'},
-  {name: 'Hubschrauber', flightTypeAircraftType: 'helicopter'},
-  {name: 'Eigenbauhubschrauber', flightTypeAircraftType: 'helicopter'},
-  {name: 'Segelflugzeug', flightTypeAircraftType: 'glider'},
-  {name: 'Eigenbausegelflugzeug', flightTypeAircraftType: 'glider'},
+  {name: 'Hubschrauber', flightTypeAircraftType: 'helicopter', icon: 'helicopter'},
+  {name: 'Eigenbauhubschrauber', flightTypeAircraftType: 'helicopter', icon: 'helicopter'},
+  {name: 'Segelflugzeug', flightTypeAircraftType: 'glider', icon: 'glider'},
+  {name: 'Eigenbausegelflugzeug', flightTypeAircraftType: 'glider', icon: 'glider'},
   {name: 'Ballon (Heissluft)', flightTypeAircraftType: 'aircraft'},
   {name: 'Ballon (Gas)', flightTypeAircraftType: 'aircraft'},
   {name: 'Luftschiff (Heissluft)', flightTypeAircraftType: 'aircraft'},
@@ -25,11 +25,23 @@ const flightTypeAircraftType = aircraftCategory => {
     return null
   }
 
-  const category =categories.find(category => category.name === aircraftCategory)
+  const category = categories.find(category => category.name === aircraftCategory)
 
   if (category) {
     return category.flightTypeAircraftType
   }
 }
 
-module.exports = {categories: categoryNames, isHelicopter, flightTypeAircraftType} // no ES6 export as this file is also required in build process without ES6 support
+const icon = aircraftCategory => {
+  if (!aircraftCategory) {
+    return null
+  }
+
+  const category = categories.find(category => category.name === aircraftCategory)
+
+  if (category) {
+    return category.icon
+  }
+}
+
+module.exports = {categories: categoryNames, isHelicopter, flightTypeAircraftType, icon} // no ES6 export as this file is also required in build process without ES6 support