Improve system imports/exports

Highlight (and sort by) category, number of importers/exporters and filter out where import demand is zero.
iaincollins · Oct 9, 2024 · 35884f6 · 35884f6
1 parent a41d6cb
commit 35884f6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/lib/system-exports.js b/lib/system-exports.js
@@ -43,4 +43,5 @@ module.exports = async (systemName) => {
 
   return Object.values(exportOrdersGroupedByCommodity)
     .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => a.category.localeCompare(b.category))
 }
diff --git a/lib/system-imports.js b/lib/system-imports.js
@@ -49,5 +49,7 @@ module.exports = async (systemName) => {
   })
 
   return Object.values(importOrdersGroupedByCommodity)
+    .filter(c => c.totalDemand)
     .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => a.category.localeCompare(b.category))
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.69.0",
+  "version": "0.70.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/system/[system-name]/index.js b/pages/system/[system-name]/index.js
@@ -419,7 +419,10 @@ export default () => {
                       render: (v, r) =>
                         <>
                           <i className='icon icarus-terminal-cargo' />{v}<br />
-                          <small>{r.importOrders.length === 1 ? '1 importer ' : `${r.importOrders.length} importers`}</small>
+                          <div className='is-visible-mobile'>
+                            <small style={{ float: 'right' }}>{r.importOrders.length === 1 ? '1 importer ' : `${r.importOrders.length} importers`}</small>
+                          </div>
+                          <small>{r.category}</small>
                           {r?.consumer === true && <small> | Consumer</small>}
                           <div className='is-visible-mobile'>
                             <table className='data-table--mini data-table--compact two-column-table'>
@@ -440,6 +443,16 @@ export default () => {
                           </div>
                         </>
                     },
+                    {
+                      title: 'Importers',
+                      dataIndex: 'importOrders',
+                      key: 'importOrders',
+                      align: 'center',
+                      width: 100,
+                      className: 'is-hidden-mobile',
+                      render: (v) => <span className='muted'>{v.length === 1 ? '1 ' : `${v.length}`}<i style={{fontSize: '1.25rem', position: 'absolute', top: '1.3rem', marginLeft: '.25rem'}} className='icarus-terminal-settlement muted' /></span>
+                    },
+
                     {
                       title: 'Updated',
                       dataIndex: 'updatedAt',
@@ -454,7 +467,7 @@ export default () => {
                       dataIndex: 'totalDemand',
                       key: 'totalDemand',
                       align: 'right',
-                      width: 150,
+                      width: 200,
                       className: 'is-hidden-mobile no-wrap',
                       render: (v) => <>{v > 0 ? `${v.toLocaleString()} T` : <small>{NO_DEMAND_TEXT}</small>}</>
                     },
@@ -519,7 +532,10 @@ export default () => {
                       render: (v, r) =>
                         <>
                           <i className='icon icarus-terminal-cargo' />{v}<br />
-                          <small>{r.exportOrders.length === 1 ? '1 exporter ' : `${r.exportOrders.length} exporters`}</small>
+                          <div className='is-visible-mobile'>
+                            <small style={{ float: 'right' }}>{r.exportOrders.length === 1 ? '1 exporter ' : `${r.exportOrders.length} exporters`}</small>
+                          </div>
+                          <small>{r.category}</small>
                           {r?.producer === true && <small> | Producer</small>}
                           {r?.rare === true && <small> | Rare</small>}
                           <div className='is-visible-mobile'>
@@ -541,6 +557,15 @@ export default () => {
                           </div>
                         </>
                     },
+                    {
+                      title: 'Exporters',
+                      dataIndex: 'exportOrders',
+                      key: 'exportOrders',
+                      align: 'center',
+                      width: 100,
+                      className: 'is-hidden-mobile',
+                      render: (v) => <span className='muted'>{v.length === 1 ? '1 ' : `${v.length}`}<i style={{fontSize: '1.25rem', position: 'absolute', top: '1.3rem', marginLeft: '.25rem'}} className='icarus-terminal-settlement muted' /></span>
+                    },
                     {
                       title: 'Updated',
                       dataIndex: 'updatedAt',
@@ -555,7 +580,7 @@ export default () => {
                       dataIndex: 'totalStock',
                       key: 'totalStock',
                       align: 'right',
-                      width: 150,
+                      width: 200,
                       className: 'is-hidden-mobile no-wrap',
                       render: (v) => <>{v.toLocaleString()} T</>
                     },