Created the slideshow view.

class/Controller/Show/Admin.php

@@ -46,6 +46,8 @@ public function postCommand(Request $request)
 
     protected function listHtmlCommand(Request $request)
     {
+        $script = $this->factory->scriptView('shows');
+        \Layout::addJSHeader($script);
         $this->createShowButton();
         return $this->factory->scriptView('shows');
     }

javascript/Show/ShowCard.jsx

@@ -1,38 +1,69 @@
 import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { Card, CardBody, CardTitle, CardImg, Button } from 'reactstrap'
 
 export default class ShowCard extends Component {
   constructor() {
+    super()
       this.state = {
         show: {
-          id: 0,
           title: null,
           img: null,
         }
       }
-
       this.loadShow = this.loadShow.bind(this)
+      this.view = this.view.bind(this)
+      this.edit = this.edit.bind(this)
+  }
+
+  componentDidMount() {
+    this.loadShow(this.props.id)
   }
 
 /**
 * Loads the details fome the back end - see Show.php
 */
  loadShow(id) {
-   $.getJSON('./slideshow/show/admin/getDetails', {show_id: id}).done(function (data) {
-     this.setState({show: data})
-   }.bind(this))
+   if (id != -1) {
+     $.getJSON('./slideshow/show/admin/getDetails', {show_id: id}).done(function (data) {
+       this.setState({show: data})
+     }.bind(this))
+   }
+   else {
+     this.setState({
+       show: {
+         title: "Test Show",
+         img: "https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180"
+       }
+     })
+   }
+ }
+
+ view() {
+
+ }
+
+ edit() {
+
  }
 
   render() {
-    const id = this.props.id
     return (
-      <div class="card" style="width: 18rem;">
-        <img class="card-img-bottom" src={this.state.show.img} >
-        <div class="card-body">
-            <h5>{this.state.show.title}</h5>
-            <a class="btn btn-success">View</a>
-            <a class="btn btn-primary">Edit</a>
-        </div>
+      <div>
+        <Card>
+          <CardImg top-width="100%" src={this.state.show.img}/>
+          <CardBody>
+            <CardTitle>{this.state.show.title}</CardTitle>
+            <Button onClick={this.view} color="primary">Present</Button>
+            <Button onClick={this.edit} color="secondary">Edit</Button>
+          </CardBody>
+        </Card>
       </div>
     )
   }
+
+}
+
+ShowCard.propTypes = {
+  id: PropTypes.number
 }

javascript/Show/ShowList.jsx

@@ -1,24 +1,29 @@
 import React, {Component} from 'react'
 
-export default class ShowList extends Component{
+export default class ShowList extends Component {
   constructor() {
     super()
     this.state = {
-      showsList: getShows()
     }
     this.getShows = this.getShows.bind(this)
+    this.pullShows = this.pullShows.bind(this)
   }
 
-  getShows() {
+  /**
+  * Pulls all the shows from the back-end
+  */
+  pullShows() {
     let shows
+    $.get()
+    return new array()
+  }
 
-    if (this.props.shows === null || this.props.shows.length === 0) {
-      cards = (<div class="card"><div class="card-body">
-                <h5>Add a Show:</h5>
-                <a href="#" class="btn btn-primary">New Show</a>
-              </div></div>)
+  getShows() {
+    let shows = pullShows()
+    if (shows === null) {
+      // Add a way to handle this or not.
     } else {
-      cards = this.props.shows.map(function (id) {
+      cards = shows.map(function (id) {
         return <ShowCard id={id}/>
       }.bind(this))
     }
@@ -33,7 +38,7 @@ export default class ShowList extends Component{
   render() {
     return (
       <div>
-        {this.state.showsList}
+        {this.getShows}
       </div>
     )
   }

javascript/Show/ShowView.jsx

@@ -1,22 +1,88 @@
 'use strict'
 import React, {Component} from 'react'
 import ShowList from './ShowList.jsx'
+import ShowCard from './ShowCard.jsx'
+import { Card, CardBody, CardTitle, Row, Col, Button } from 'reactstrap'
+import { Modal, ModalHeader, ModalBody, Input, InputGroup, InputGroupAddon } from 'reactstrap'
 
 export default class ShowView extends Component {
   constructor() {
       super()
-      this.state = {}
+      this.state = {
+        modalOpen: false,
+        title: ""
+      }
 
+      this.saveNewShow = this.saveNewShow.bind(this)
+      this.switchModal = this.switchModal.bind(this)
+      this.updateTitle = this.updateTitle.bind(this)
     }
 
+    saveNewShow(title) {
+      if (this.state.title != null) {
+        $.post('./slideshow/show/', title).done(function () {
+          window.location.href = './slideshow/show/edit'
+        }.bind(this)).fail(function () {
+          console.log("Fatal Error On Save Has Occured")
+        })
+      }
+    }
+
+    switchModal() {
+      this.setState({
+        modalOpen: !this.state.modalOpen
+      })
+    }
+
+    updateTitle(event) {
+      this.setState({
+        title: event.target.value
+      })
+    }
 
   render() {
+
+    const modal = (
+      <Modal isOpen={this.state.modalOpen} toggle={this.switchModal} fade={false} backdrop={true}>
+        <ModalHeader toggle={this.switchModal} >Enter a Title:</ModalHeader>
+        <ModalBody>
+          <InputGroup>
+            <Input
+                    type="text"
+                    placeholder="New Show"
+                    onChange={this.updateTitle}
+                    value={this.state.title} />
+              <InputGroupAddon addonType="append">
+            <Button onClick={this.saveNewShow} color="success">Save</Button>
+            </InputGroupAddon>
+          </InputGroup>
+        </ModalBody>
+      </Modal>
+    )
+
+    const newShow = (
+      <Card body className="text-center">
+        <CardBody>
+          <CardTitle>Create New Show</CardTitle>
+          <Button onClick={this.switchModal} color="secondary">+</Button>
+        </CardBody>
+      </Card>
+    )
+
     return (
       <div>
         <h2>Shows:</h2>
-        // TODO: ALl the current shows that are associtaed with the admin user
-        // will be rendered here somehow... maybe json of slides
-        <ShowList />
+        <div className="jumbotron">
+          <div className="card-deck">
+            <ShowList />
+            <ShowCard id={-1} />
+            <ShowCard id={-1} />
+            <ShowCard id={-1} />
+          </div>
+          <hr />
+          <Col>{newShow}</Col>
+        </div>
+        {modal}
       </div>
     )
   }

javascript/Show/index.jsx

@@ -4,4 +4,4 @@ import ReactDOM from 'react-dom'
 import ShowView from './ShowView.jsx'
 
 ReactDOM.render(
-  <ShowView/>, document.getElementById('ShowView'))
+  <ShowView/>, document.getElementById('shows'))

package.json

@@ -4,6 +4,10 @@
   "description": "Slideshow module using reveal.js",
   "main": "index.js",
   "dependencies": {
+    "popper.js": "^1.14.3",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "reactstrap": "^6.1.0",
     "reveal": "0.0.4"
   },
   "devDependencies": {
@@ -12,17 +16,16 @@
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "bootstrap": "^4.0.0",
+    "bootstrap": "^4.1.1",
     "browser-sync": "^2.23.6",
     "browser-sync-webpack-plugin": "^2.0.1",
     "css-loader": "^0.28.9",
     "es6-promise": "^4.2.4",
     "file-loader": "^1.1.9",
+    "imports-loader": "^0.8.0",
     "jquery": "^3.3.1",
     "node-sass": "^4.7.2",
     "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
     "react-dropzone": "^4.2.8",
     "react-medium-editor": "^1.8.1",
     "react-modal": "^3.3.1",
@@ -46,5 +49,6 @@
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/AppStateESS/slideshow/issues"
-  }
+  },
+  "homepage": "https://github.com/AppStateESS/slideshow#readme"
 }

templates/Show/view.html

@@ -1,10 +1,3 @@
 <div class="slideshow">
-  <h2>Show: <?=$title?></h2>
-    <?php if (!empty($sections)): ?>
-    <?php foreach ($sections as $section):?>
-    <h3 style="margin-left:1em"><a href="./slideshow/Section/<?=$section['id']?>"><?=$section['title']?></a></h3>
-    <?php endforeach;?>
-    <?php else:?>
-    <div><em>No sections found</em></div>
-    <?php endif;?>
-</div>
+  <div id="shows"></div>
+</div>