Improve UI for materials list

iaincollins · Dec 31, 2021 · fa0850e · fa0850e
1 parent acfbea8
commit fa0850e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 55 deletions.
diff --git a/src/web/pages/eng/materials.js b/src/web/pages/eng/materials.js
@@ -6,7 +6,7 @@ import { EngineeringPanelNavItems } from 'lib/navigation-items'
 
 export default function EngineeringMaterialsPage () {
   const { connected, active, ready } = useSocket()
-  const [materials, setMaterials] = useState([])
+  const [materials, setMaterials] = useState()
 
   useEffect(async () => {
     if (!connected) return
@@ -27,67 +27,68 @@ export default function EngineeringMaterialsPage () {
         {materials &&
           <>
             <h1 className='text-info'>Materials</h1>
-            <hr style={{ margin: '1rem 0' }} />
-            <h2 style={{ margin: '1rem 0' }} className='text-primary'>Raw Materials</h2>
-            {materials && <Materials materials={materials.filter(item => item.type === 'Raw')} />}
-            <hr style={{ margin: '1rem 0' }} />
-            <h2 style={{ margin: '1rem 0' }} className='text-primary'>Manufactured Materials</h2>
-            {materials && <Materials materials={materials.filter(item => item.type === 'Manufactured')} />}
-            <hr style={{ margin: '1rem 0' }} />
-            <h2 style={{ margin: '1rem 0' }} className='text-primary'>Encoded Materials</h2>
-            {materials && <Materials materials={materials.filter(item => item.type === 'Encoded')} />}
+            {materials && <Materials materialType='Raw' materials={materials.filter(item => item.type === 'Raw')} />}
+            {materials && <Materials materialType='Manufactured' materials={materials.filter(item => item.type === 'Manufactured')} />}
+            {materials && <Materials materialType='Encoded' materials={materials.filter(item => item.type === 'Encoded')} />}
           </>}
       </Panel>
     </Layout>
   )
 }
 
-function Materials ({ materials }) {
+function Materials ({ materialType, materials }) {
   if (materials.length === 0) return (<p className='text-info text-uppercase'>No materials found.</p>)
 
   return (
-    <table className='table--animated'>
-      <thead>
-        <tr>
-          <td style={{ width: '5rem' }} className='text-right'>#</td>
-          <td>Material</td>
-          <td className='hidden-small'>Rarity</td>
-          <td className='hidden-small'>Engineering applications</td>
-        </tr>
-      </thead>
-      <tbody>
-        {materials.map(item =>
-          <tr key={`material_${item.name}_${item.type}`}>
-            <td style={{ width: '5rem' }} className='text-right'>
-              {item.count}<span className='text-muted'>/{item.maxCount}</span>
-              {item.maxCount && <progress style={{ height: '.75rem', marginTop: '.5rem' }} value={item.count} max={item.maxCount} />}
-            </td>
-            <td>
-              <h3>{item.name}</h3>
-              <span className='text-muted'>{item.description}</span>
-            </td>
-            <td className='hidden-small text-no-wrap'><small>{item.rarity}</small></td>
-            <td className='hidden-small'>
-              {item.blueprints
-                .map(blueprint => {
-                  // TODO Highlight engineering uses relevant to equipped engineered modules
-                  // TODO Highlight engineering uses relevant to pinned engineering blueprints
-                  let name = blueprint.symbol.replace(/_(.*?)$/, '').replace(/([a-z])([A-Z])/g, '$1 $2').trim()
-                  if (name === 'MC') name = 'Weapons'
-                  if (name === 'Weapon') name = 'Weapons'
-                  if (name === 'Engine') name = 'Engines'
-                  if (name.includes('Limpet')) name = 'Limpets'
-                  if (name === 'FSDinterdictor') name = 'Interdictor'
-                  if (name === 'Misc') name = blueprint.symbol.replaceAll('_', '').replace(/([a-z])([A-Z])/g, '$1 $2').trim()
-                  return name
-                })
-                .filter((value, index, self) => self.indexOf(value) === index)
-                .sort()
-                .map((use, i) => <Fragment key={`material_${item.name}_${use}`}>{i === 0 ? '' : <span className='text-muted'>, </span>}<span className='text-muted'>{use}</span></Fragment>)}
-            </td>
+    <>
+      <hr style={{ margin: '1rem 0' }} />
+      <h2 style={{ margin: '1rem 0' }} className='text-primary'>{materialType} Materials</h2>
+      <table className='table--animated'>
+        <thead>
+          <tr>
+            <td style={{ width: '20rem' }}>{materialType} Material</td>
+            <td className='hidden-small'>Engineering applications</td>
+            <td className='hidden-small text-right'>Grade</td>
           </tr>
-        )}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {materials.map(item =>
+            <tr key={`material_${item.name}_${item.type}`}>
+              <td style={{ width: '20rem' }}>
+                <h3>{item.name}</h3>
+                <span className='text-muted'>{item.description}</span>
+                <div>
+                  <div style={{width: '30%', display: 'inline-block'}}>
+                    {item.count}<span className='text-muted'>/{item.maxCount}</span>
+                  </div>
+                  <div style={{width: '70%', display: 'inline-block'}}>
+                    {<progress style={{ height: '1rem' }} value={item.count} max={item?.maxCount ?? item.count} />}
+                  </div>
+                </div>
+              </td>
+              <td className='hidden-small'>
+                {item.blueprints
+                  .map(blueprint => {
+                    // TODO Highlight engineering uses relevant to equipped engineered modules
+                    // TODO Highlight engineering uses relevant to pinned engineering blueprints
+                    let name = blueprint.symbol.replace(/_(.*?)$/, '').replace(/([a-z])([A-Z])/g, '$1 $2').trim()
+                    if (name === 'MC') name = 'Weapons'
+                    if (name === 'Weapon') name = 'Weapons'
+                    if (name === 'Engine') name = 'Engines'
+                    if (name.includes('Limpet')) name = 'Limpets'
+                    if (name === 'FSDinterdictor') name = 'Interdictor'
+                    if (name === 'Misc') name = blueprint.symbol.replaceAll('_', '').replace(/([a-z])([A-Z])/g, '$1 $2').trim()
+                    return name
+                  })
+                  .filter((value, index, self) => self.indexOf(value) === index)
+                  .sort()
+                  .map((use, i) => <Fragment key={`material_${item.name}_${use}`}>{i === 0 ? '' : <span className='text-muted'>, </span>}<span className='text-muted'>{use}</span></Fragment>)}
+              </td>
+              <td className='hidden-small text-right text-no-wrap'><small>{item.rarity}</small></td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </>
   )
 }
diff --git a/src/web/pages/ship/cargo.js b/src/web/pages/ship/cargo.js
@@ -36,8 +36,6 @@ export default function ShipCargoPage () {
             <h1 className='text-info'>Cargo Manifest</h1>
             <h2 className='text-primary'>{ship?.name}</h2>
             <hr style={{ margin: '1rem 0' }} />
-            <h2 style={{ margin: '1rem 0' }} className='text-primary text-primary'>Inventory</h2>
-            {cargo && !ship.onBoard && <p style={{ marginBottom: '1rem' }} className='text-info text-muted text-uppercase'>Displaying last recorded inventory. Will be updated upon boarding.</p>}
             {cargo && cargo.length === 0 && <p className='text-info text-uppercase'>Cargo hold is empty.</p>}
             {cargo && cargo.length > 0 &&
               <table className='table--animated'>