Update plots placeholders (#14)

* Update Artifact placeholders
* Replace plot placeholders

src/components/Plot.css

@@ -24,3 +24,7 @@ h1.plot {
 .plot a {
     color: #4584e9 !important;
 }
+
+.plot .new {
+    color: #da3e00 !important; 
+}

src/components/Plot.js

@@ -1,115 +1,219 @@
+import React from "react";
+import { useParams } from "react-router-dom";
 import { Container, Row, Col } from "react-bootstrap";
+import { Link } from "react-router-dom";
+import { apiUrl } from "../api";
+
 import './Plot.css';
 
-//TODO: Add datafetch etc. Copy from for example Character.js or Artifact.js
+const getPlot = async (id) => {
+  const response = await fetch(apiUrl(`/story/plots/${id}`));
+  const plot = await response.json();
+  return plot;
+}
+
+const getMessages = async () => {
+  const response = await fetch(apiUrl(`/story/messages/`));
+  const messages = await response.json();
+  return messages;
+}
+
+const getCharacters = async () => {
+  const response = await fetch(apiUrl("/person?show_hidden=true&is_character=true"));
+  const characters = await response.json();
+  return characters.persons;
+}
+
+const getNpcs = async () => {
+    const response = await fetch(apiUrl("/person?show_hidden=true&is_character=false"));
+    const npcs = await response.json();
+    return npcs.persons;
+  }
+
+export default function Plot(props) {
+  const [plot, setPlot] = React.useState(null);
+  const [messages, setMessages] = React.useState(null);
+  const [characters, setCharacters] = React.useState([]);
+  const params = useParams();
+
+
+  React.useEffect(() => {
+    if (!params.id) return;
+    getPlot(params.id).then((s) => setPlot(s));
+  }, [params.id, setPlot]);
+
+  React.useEffect(() => {
+    getMessages().then((s) => setMessages(s));
+  }, [setMessages]);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [charactersData, npcsData] = await Promise.all([
+          getCharacters(),
+          getNpcs(),
+        ]);
+
+        const allCharacters = [...charactersData, ...npcsData];
+        setCharacters(allCharacters);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  React.useEffect(() => {
+    props.changeTab('Plots');
+  }, [props]);
+
+  const renderPlot = () => {
+    if (!plot || !messages) return null;
+    const relatedMessageIds = plot.messages.map(m => m.id)
+    const relatedMessages = messages.filter(m => relatedMessageIds.includes(m.id))
+    const relatedCharacterIds = plot.persons.map(p => p.id)
+    const relatedCharacters = characters.filter(c => relatedCharacterIds.includes(c.id))
+    const plot_notes = plot.gm_notes ? plot.gm_notes.split('\r\n') : [];
+    const copiedFromCharacter = plot.copy_from_characters ? plot.copy_from_characters.split('\r\n\r\n') : [];
+    const characterGroups = plot.character_groups ? plot.character_groups.split(', ') : [];
 
-export default function Plot() {
     return (
-      <div>
-        <h1 className='plot' id="app-title">Plot Name (MAIN PLOTS) [CREATE PLOT BUTTON]</h1>
-        <div className='plot'>
-          <Container fluid className='plot'>
-            <Row>
-              <Col sm><span className='mini-header'>Characters Involved</span></Col>
-            </Row>
-            {<span><ul><li>Name Surname (Main character, Character)</li><li>Name Surname2 (Side character, NPC)</li><li>Name Surname2 (Knows random info, Character)</li></ul></span>}
-            <Row>
-              <Col sm><span className='mini-header'>Character Groups Involved</span></Col>
-            </Row>
-            {<span><ul><li>Engineers</li><li>Scientists</li><li>All</li></ul></span>}
-            <Row>
-              <Col sm><span className='mini-header'>Basic Info</span></Col>
-            </Row>
-            <Row>
-              <Col sm={6}><span className='caption'>GM Actions: </span>No need / Text NPC / Event / Briefing Character</Col>
-              <Col sm={4}><span className='caption'>Plot size: </span>Small / Medium / Large</Col>
-            </Row>
-            <Row>
-              <Col sm={6}><span className='caption'>Text NPC should send first message: </span>Yes / No</Col>
-              <Col sm={4}><span className='caption'>Plot themes: </span>Love / Beatrayal / Political / Machine</Col>
-            </Row>
-            <Row>
-              <Col sm={6}><span className='caption'>Happens after jump: </span>- / 3 / 13 (Editable unless plot is locked)</Col>
-              <Col sm={4}><span className='caption'>Plot Importance: </span>Nice to have / Should have / Mandatory</Col>
-            </Row>
-            <Row>
-              <Col sm={6}><span className='caption'>Locked plot: </span>Yes / No</Col>
-            </Row>
-            <Row>
-              <Col sm>&nbsp;</Col>
-            </Row>
-            <Row>
-              <Col sm><span className='mini-header'>Events [CREATE EVENT BUTTON]</span></Col>
-            </Row>
-            {<span><ul><li>Not part of an event</li><li>Link to event</li></ul></span>}
-            <Row>
-              <Col sm><span className='mini-header'>Messages [CREATE MESSAGE BUTTON]</span></Col>
-            </Row>
-            {<span><ul><li>No messages</li><li>Link to message 1 [sent / not sent]</li></ul></span>}
-            <Row>
-              <Col sm><span className='mini-header'>Artifacts</span></Col>
-            </Row>
-            {<span><ul><li>No artifacts</li><li>Link to artifact 1</li></ul></span>}
-            <Row>
-              <Col sm><span className='mini-header'>Short Description</span></Col>
-            </Row>
-            <Row>
-              <Col sm><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>
-            </Row>
-            <Row>
-              <Col sm>&nbsp;</Col>
-            </Row>
-            <Row>
-              <Col sm><span className='mini-header'>GM Notes</span></Col>
-            </Row>
-            <Row>
-              <Col sm><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>
-            </Row>
-            <Row>
-              <Col sm>&nbsp;</Col>
-            </Row>
-            <Row>
-              <Col sm><span className='mini-header'>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>
-            </ul>
-            <Row>
-              <Col sm><span>Save the notes between games!</span></Col>
-            </Row>
-            <Row>
-              <Col sm>&nbsp;</Col>
-            </Row>
-            <Row>
-              <Col sm><span className='mini-header'>Copied from characters (optional)</span></Col>
-            </Row>
-            <Row>
-              <Col sm><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>
-            </Row>
-            <Row>
-              <Col sm><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>
-            </Row>
-            <Row>
-              <Col sm>&nbsp;</Col>
-            </Row>
-          </Container>
+        <div>
+          <div className='plot'>
+            <Container fluid className='plot'>
+              <Row>
+                <Col sm><span className='mini-header'>Characters Involved</span>
+                  {plot.persons.length<1 ? <p>No linked characters</p> : <ul> {relatedCharacters.map(p => <li key={p.id}>
+                    <Link onClick={() => props.changeTab('Characters')} to={`/characters/${p.id}`}>{p.full_name}</Link>
+                    <span> - {p.is_character ? "Character" : "NPC"}</span></li>)}
+                    </ul>
+                  }</Col>
+              </Row>
+              <Row>
+                <Col sm><span className='mini-header'>Character Groups Involved</span></Col>
+              </Row>
+              {characterGroups.length <1 ? <p>No linked character groups</p> : 
+              <ul>{characterGroups.map(g => <li key={g}><Row><Col sm>{g}</Col></Row></li>)}</ul>}
+              <Row>
+                <Col sm><span className='mini-header'>Basic Info</span></Col>
+              </Row>
+              <Row>
+                <Col sm={6}><span className='caption'>GM Actions: </span>{plot.gm_actions}</Col>
+                <Col sm={4}><span className='caption'>Plot size: </span>{plot.size}</Col>
+              </Row>
+              <Row>
+                <Col sm={6}><span className='caption'>Text NPC should send first message: </span>{plot.text_npc_first_message ? "Yes" : "No"}</Col>
+                <Col sm={4}><span className='caption'>Plot themes: </span>
+                {plot.themes.length<1 ? <span>No themes defined</span> : plot.themes}</Col>
+              </Row>
+              <Row>
+                <Col sm={6}><span className='caption'>Happens after jump: </span>
+                {plot.after_jump ? plot.after_jump : <span>No jump defined</span>}
+                <span className='new'> (Editable unless plot is locked)</span></Col>
+                <Col sm={4}><span className='caption'>Plot Importance: </span> {plot.importance}</Col>
+              </Row>
+              <Row>
+                <Col sm={6}><span className='caption'>Locked plot: </span>{plot.locked ? "Yes" : "No"}</Col>
+              </Row>
+              <Row>
+                <Col sm>&nbsp;</Col>
+              </Row>
+              <Row>
+                <Col sm><span className='mini-header'>Events <span className='new'>[CREATE EVENT BUTTON]</span></span></Col>
+              </Row>
+              {plot.events.length<1 ? <p>No linked events</p> : <ul> {plot.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'>Messages <span className='new'>[CREATE MESSAGE BUTTON]</span></span></Col>
+              </Row>
+              {relatedMessages.length<1 ? <p>No messages</p> : <ul> {relatedMessages.map(m => <li key={m.id}>
+                  <Link onClick={() => props.changeTab('Messages')} to={`/messages/${m.id}`}>{m.name}</Link> - Sent: {m.sent}</li>)}
+                  </ul>
+              }
+              <Row>
+                <Col sm><span className='mini-header'>Artifacts</span></Col>
+              </Row>
+              {plot.artifacts.length<1 ? <p>No linked artifacts</p> : <ul> {plot.artifacts.map(a => <li key={a.id}>
+                  <Link onClick={() => props.changeTab('Artifacts')} to={`/artifacts/${a.id}`}>Artifact id {a.id}, {a.name}</Link></li>)}
+                  </ul>
+              }
+              <Row>
+                <Col sm><span className='mini-header'>Short Description</span></Col>
+              </Row>
+              <Row>
+                <Col sm>
+                  {plot.description}
+                  </Col>
+              </Row>
+              <Row>
+                <Col sm>&nbsp;</Col>
+              </Row>
+              <Row>
+                <Col sm><span className='mini-header'>GM Notes</span></Col>
+              </Row>
+              <Row>
+                <Col sm>
+                  {plot_notes.length <1 ? <p>No notes</p> : <ul>
+                  {plot_notes.map(n => <li key={n}><Row><Col sm>{n}</Col></Row></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>
+              </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>
+              </ul>
+              <Row>
+                <Col sm><span className="new">Save the notes between games!</span></Col>
+              </Row>
+              <Row>
+                <Col sm>&nbsp;</Col>
+              </Row>
+              <Row>
+                <Col sm><span className='mini-header'>Copied from characters (optional)</span></Col>
+              </Row>
+              <Row>
+                <Col sm>
+                {copiedFromCharacter.length <1 ? <p>Nothing copied</p> : 
+                copiedFromCharacter.map(n => <p key={n}>{n}</p>)}
+                  </Col>
+              </Row>
+              <Row>
+                <Col sm>&nbsp;</Col>
+              </Row>
+            </Container>
+          </div>
         </div>
+      )
+    }
+
+    return (
+      <div>
+        <h1 className='plot' id="app-title">{plot?.name} <span className="new">[CREATE PLOT BUTTON]</span></h1>
+        {renderPlot()}
       </div>
     )
   }

src/components/Plots.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";
@@ -26,6 +26,12 @@ export default function Plots() {
     return (page-1) * sizePerPage + rowIndex + 1;
   }
 
+
+  const selectOptions = {
+    true: 'Yes',
+    false: 'No'
+  };
+
   const columns = [{
       dataField: '_row_index_placeholder',
       text: 'Row',
@@ -71,7 +77,10 @@ export default function Plots() {
       dataField: 'text_npc_first_message',
       text: 'Text NPC Message First?',
       sort: true,
-      filter: textFilter()
+      formatter: cell => selectOptions[cell],
+      filter: selectFilter({
+        options: selectOptions
+      })
   }];
 
   const customTotal = (from, to, size) => (