Unify data (#16)

* refactor: refactor artifacts * chore: fix artifacts.js * chore: update table data and filters * chore: shorten Present and accounted for to Accounted * chore: change order and style of data * refactor: change data order * refactor: data order
OdysseusLarp · Apr 24, 2024 · 221bb89 · 221bb89
1 parent 045b3cb
commit 221bb89
Show file tree

Hide file tree

Showing 13 changed files with 276 additions and 210 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Artifact.js b/src/components/Artifact.js
@@ -21,7 +21,6 @@ const getArtifactDetails = async (id) => {
 const getDiscoveredById = async (name) => {
   const response = await fetch(apiUrl(`/person/search/${name}`));
   const discoveredBy = await response.json();
-  console.log(discoveredBy);
   const discoveredById = discoveredBy.find(person => person.full_name === name)?.id;
   return discoveredById;
 }
@@ -54,29 +53,25 @@ export default function Artifact(props) {
   const renderArtifact = () => {
     if (!artifact || !artifactDetails) return null;
 
-    const artifact_entries = artifact.entries.map((e) => e.entry.split('\r\n\r\n')).flat();
-    const artifact_notes = artifact.gm_notes ? artifact.gm_notes.split('\r\n\r\n') : [];
+    const artifact_entries = artifact.entries.map((e) => e.entry.split('\n')).flat();
+    const artifact_notes = artifact.gm_notes ? artifact.gm_notes.split('\n') : [];
 
     return (
       <div className='artifact'>
         <Container fluid className='artifact'>
-          <Row>
-            <Col sm><span className='mini-header'>{artifact.name}</span></Col>
-          </Row>
           <Row className='row-mini-header'>
             <Col sm><span className='mini-header'>Basic Info</span></Col>
           </Row>
           <Row>
-            <Col sm={4}><span className='caption'>Name: </span>{artifact.catalog_id}</Col>
-            <Col sm={4}><span className='caption'>Catalog ID: </span>{artifact.catalog_id}</Col>
+            <Col sm={4}><span className='caption'>Name: </span>{artifact.name}</Col>
             <Col sm={4}><span className='caption'>ID: </span>{artifact.id}</Col>
           </Row>
           <Row>
-            <Col sm={4}><span className='caption'>Type: </span>{artifact.name}</Col>
-            <Col sm={8}><span className='caption'>Visible on DataHub: </span>{artifact.is_visible ? "Yes" : "No"}</Col>
+            <Col sm={4}><span className='caption'>Origin: </span>{artifact.type}</Col>
+            <Col sm={4}><span className='caption'>Catalog ID: </span>{artifact.catalog_id}</Col>
           </Row>
           <Row>
-            <Col sm><span className='caption'>Origin: </span>{artifact.type}</Col>
+            <Col sm={4}><span className='caption'>Visible on DataHub: </span>{artifact.is_visible ? "Yes" : "No"}</Col>
           </Row>
           <Row className='row-mini-header'>
             <Col sm><span className='mini-header'>Discovery</span></Col>
@@ -93,73 +88,61 @@ export default function Artifact(props) {
           <Row className='row-mini-header'>
             <Col sm><span className='mini-header'>Artifact Description</span></Col>
           </Row>
-          <Row><Col sm>{artifact.text.split('![]')[0]}</Col></Row>
-          <Row className='row-mini-header'>
-            <Col sm><span className='mini-header'>Artifact Entries</span></Col>
-          </Row>
-            {artifact_entries.length <1 ? <p>No entries</p> : <ul>
-              {artifact_entries.map(e => <li key={e}><Row><Col sm>{e}</Col></Row></li>)}
-            </ul>}
-          <Row>
-            <Col sm><span className='mini-header'>Plots</span></Col>
-          </Row>
-            {artifactDetails.plots.length<1 ? <p>No linked plots</p> : <ul> {artifactDetails.plots.map(p => <li key={p.id}>
-                  <Link onClick={() => props.changeTab('Plots')} to={`/plots/${p.id}`}>{p.name}</Link></li>)}
-                  </ul>
-            }
-          <Row>
-              <Col sm><span className='mini-header'>Events <span className='new'>[CREATE EVENT BUTTON]</span></span></Col>
-            </Row>
-            {artifactDetails.events.length<1 ? <p>No linked events</p> : <ul> {artifactDetails.events.map(e => <li key={e.id}>
-                  <Link onClick={() => props.changeTab('Events')} to={`/events/${e.id}`}>{e.name}</Link></li>)}
-                  </ul>
-            }
-          <Row>
-            <Col sm><span className='mini-header'>GM Notes</span></Col>
-          </Row>
+          <Row><Col sm><p>{artifact.text.split('![]')[0]}</p></Col></Row>
+          <Row><Col sm><span className='mini-header'>GM Notes</span></Col></Row>
+          {artifact_notes.length < 1 ? <ul><li>No notes</li></ul> :
+            <ul>{artifact_notes.map(n => <li key={n}>{n}</li>)}</ul>}
           <Row>
-            <Col sm>
-            {artifact_notes.length <1 ? <p>No notes</p> : <ul>
-              {artifact_notes.map(n => <li key={n}><Row><Col sm>{n}</Col></Row></li>)}
-            </ul>}
+            <Col sm={4}><span className='mini-header'>Plots</span>
+              {artifactDetails.plots.length < 1 ? <ul><li>No linked plots</li></ul> : <ul> {artifactDetails.plots.map(p => <li key={p.id}>
+                <span className='plots'><Link onClick={() => props.changeTab('Plots')} to={`/plots/${p.id}`}>{p.name}</Link></span></li>)}
+              </ul>}
+            </Col>
+            <Col sm><span className='mini-header'>Events</span>
+              {artifactDetails.events.length < 1 ? <ul><li>No linked events</li></ul> : <ul> {artifactDetails.events.map(e => <li key={e.id}>
+                <span className='events'><Link onClick={() => props.changeTab('Events')} to={`/events/${e.id}`}>{e.name}</Link></span></li>)}
+              </ul>}
             </Col>
           </Row>
           <Row>
-            <Col sm>&nbsp;</Col>
-          </Row>  
-          <Row>
-          <Col sm><span className='mini-header new'>GM Notes During the Runs [ADD NOTE BUTTON] [HIDE PREVIOUS RUNS CHECKBOX]</span></Col>
+            <Col sm><span className='mini-header new'>GM Notes During the Runs [ADD NOTE BUTTON] [HIDE PREVIOUS RUNS CHECKBOX]</span></Col>
           </Row>
           <ul><li><Row>
             <Col sm><span>Timestamp: Note 6</span></Col>
           </Row></li>
-          <li><Row>
-            <Col sm><span>Timestamp: Note 5</span></Col>
-          </Row></li>
-          <li><Row>
-            <Col sm><span>Timestamp: Note 4</span></Col>
-          </Row></li>
-          <li><Row>
-            <Col sm><span>Timestamp: Note 3</span></Col>
-          </Row></li>
-          <li><Row>
-            <Col sm><span>Timestamp: Note 2</span></Col>
-          </Row></li>
-          <li><Row>
-            <Col sm><span>Timestamp: Note 1</span></Col>
-          </Row></li>
+            <li><Row>
+              <Col sm><span>Timestamp: Note 5</span></Col>
+            </Row></li>
+            <li><Row>
+              <Col sm><span>Timestamp: Note 4</span></Col>
+            </Row></li>
+            <li><Row>
+              <Col sm><span>Timestamp: Note 3</span></Col>
+            </Row></li>
+            <li><Row>
+              <Col sm><span>Timestamp: Note 2</span></Col>
+            </Row></li>
+            <li><Row>
+              <Col sm><span>Timestamp: Note 1</span></Col>
+            </Row></li>
           </ul>
           <Row>
-            <Col sm><span className='new'>Save the notes between games!</span></Col>
+            <Col sm><p className='new'>Save the notes between games!</p></Col>
+          </Row>
+          <Row>
+            <Col sm><span className='mini-header'>Artifact Entries</span></Col>
           </Row>
+          {artifact_entries.length < 1 ? <ul><li>No entries</li></ul> : <ul>
+            {artifact_entries.map(e => <li key={e}><Row><Col sm>{e}</Col></Row></li>)}
+          </ul>}
         </Container>
       </div>
     )
   }
 
   return (
     <div>
-      <h1 className='artifact'>{artifact?.catalog_id}</h1>
+      <h1 className='artifact'>{artifact?.catalog_id}, {artifact?.name}</h1>
       {renderArtifact()}
     </div>
   );

diff --git a/src/components/Artifacts.js b/src/components/Artifacts.js
@@ -1,6 +1,6 @@
 import React from "react";
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
 import paginationFactory from 'react-bootstrap-table2-paginator';
 import { Link } from "react-router-dom";
 import { apiUrl } from "../api";
@@ -25,6 +25,19 @@ export default function Artifacts() {
   function getRowIndex(cell, row, rowIndex) {
     return (page-1) * sizePerPage + rowIndex + 1;
   }
+
+  const originSelectOptions = {
+    "Elder": 'Elder',
+    "EOC": 'EOC',
+    "Machine": 'Machine',
+    "Earth": 'Earth',
+    "Unknown": 'Unknown',
+  };
+
+  const selectOptions = {
+    true: 'Yes',
+    false: 'No'
+  };
 
   const columns = [{
       dataField: '_row_index_placeholder',
@@ -36,22 +49,27 @@ export default function Artifacts() {
       align: 'center'
     }, {
       dataField: 'catalog_id',
-      text: 'Name',
+      text: 'Catalog ID',
       sort: true,
       filter: textFilter(),
       formatter: (cell, row) => {
         return <Link to={`/artifacts/${row.id}`}>{cell}</Link>
       }
     }, {
       dataField: 'name',
-      text: 'Type',
+      text: 'Name',
       sort: true,
-      filter: textFilter()
+      filter: textFilter(),
+      headerStyle: () => {
+        return { width: '17%', textAlign: 'left' };
+      },
     }, {
       dataField: 'type',
       text: 'Origin',
       sort: true,
-      filter: textFilter()
+      filter: selectFilter({
+        options: originSelectOptions
+      }),
     }, {
       dataField: 'discovered_at',
       text: 'Discovered At',
@@ -67,6 +85,14 @@ export default function Artifacts() {
       text: 'Discovered From',
       sort: true,
       filter: textFilter()
+    }, {
+      dataField: 'is_visible',
+      text: 'Visible',
+      sort: true,
+      formatter: cell => selectOptions[cell],
+      filter: selectFilter({
+        options: selectOptions
+      })
   }];
 
   const customTotal = (from, to, size) => (

diff --git a/src/components/Events.js b/src/components/Events.js
@@ -52,11 +52,6 @@ export default function Events() {
       text: 'Character groups',
       sort: true,
       filter: textFilter()
-    }, {
-      dataField: 'type',
-      text: 'Type',
-      sort: true,
-      filter: textFilter()
     }, {
       dataField: 'size',
       text: 'Size',

diff --git a/src/components/Fleet.js b/src/components/Fleet.js
@@ -1,9 +1,10 @@
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
 import paginationFactory from 'react-bootstrap-table2-paginator';
 import React from "react";
 import { Link } from "react-router-dom";
 import { apiUrl } from "../api";
+import { Container, Row, Col } from "react-bootstrap";
 
 import './Fleet.css';
 
@@ -26,6 +27,24 @@ export default function Fleet() {
   function getRowIndex(cell, row, rowIndex) {
     return (page-1) * sizePerPage + rowIndex + 1;
   }
+
+  const classSelectOptions = {
+    "Aurora Class Explorer": 'Aurora Class Explorer',
+    "Stellar Class Battlecruiser": 'Stellar Class Battlecruiser',
+    "Helios Class Corvette": 'Helios Class Corvette',
+    "Luna Class Cargo Carrier": 'Luna Class Cargo Carrier',
+    "Eclipse Class Frigate": 'Eclipse Class Frigate',
+  };
+
+  const statusSelectOptions = {
+    "Present and accounted for": 'Accounted',
+    "Destroyed": 'Destroyed',
+  };
+
+  const typeSelectOptions = {
+    "Military": 'Military',
+    "Civilian": 'Civilian',
+  };
 
   const columns = [{
       dataField: '_row_index_placeholder',
@@ -46,14 +65,6 @@ export default function Fleet() {
       formatter: (cell, row) => {
         return <Link to={`/fleet/${row.id}`}>{cell}</Link>
       }
-    }, {
-      dataField: 'id',
-      text: 'ID',
-      sort: true,
-      headerStyle: () => {
-        return { width: '10%', textAlign: 'left' };
-      },
-      filter: textFilter()
     }, {
       dataField: 'description',
       text: 'Description',
@@ -63,20 +74,35 @@ export default function Fleet() {
       dataField: 'class',
       text: 'Class',
       sort: true,
-      filter: textFilter()
+      headerStyle: () => {
+        return { width: '20%', textAlign: 'left' };
+      },
+      filter: selectFilter({
+        options: classSelectOptions
+      }),
     }, {
       dataField: 'status',
       text: 'Status',
       sort: true,
-      filter: textFilter()
+      headerStyle: () => {
+        return { width: '13%', textAlign: 'left' };
+      },
+      formatter: (cell, row) => {
+        return cell === 'Present and accounted for' ? "Accounted" : cell
+      },
+      filter: selectFilter({
+        options: statusSelectOptions
+      }),
     }, {
       dataField: 'type',
       text: 'Type',
       sort: true,
       headerStyle: () => {
         return { width: '10%', textAlign: 'left' };
       },
-      filter: textFilter()
+      filter: selectFilter({
+        options: typeSelectOptions
+      }),
     }, {
       dataField: 'position.name',
       text: 'Position',
@@ -85,22 +111,6 @@ export default function Fleet() {
         return { width: '10%', textAlign: 'left' };
       },
       filter: textFilter()
-    }, {
-      dataField: 'fighter_count',
-      text: 'Fighter Count',
-      sort: true,
-      headerStyle: () => {
-        return { width: '5%', textAlign: 'center' };
-      },
-      align: 'center'
-    }, {
-      dataField: 'transporter_count',
-      text: 'Transporter Count',
-      sort: true,
-      headerStyle: () => {
-        return { width: '5%', textAlign: 'center' };
-      },
-      align: 'center'
     }, {
       dataField: 'person_count',
       text: 'Person Count',
@@ -166,6 +176,11 @@ export default function Fleet() {
 
   return (
     <div className='fleet'>
+    <Container fluid className='ship'>
+      <Row>
+        <Col sm><p className='mini-header'>Total souls alive: {fleet.map(ship => parseInt(ship.person_count)).reduce((a, b) => a + b, 0)}</p></Col>
+      </Row>
+      </Container>
       <BootstrapTable
         bootstrap4
         striped