RSS configuration and a simple admin panel

client/README.md

@@ -1,4 +1,4 @@
-# tal-client
+# shortcut-client
 
 This is the client-side React app. Most of these commands should work, but please refer to [the wiki](https://github.com/FeelTrainCoop/shortcut/wiki) for up-to-date documentation instead. This README will soon be updated to reflect the current state of the project.
 

client/package.json

@@ -85,8 +85,9 @@
     "express": "~4.13.4",
     "express-session": "~1.13.0",
     "fbgraph": "~1.1.0",
+    "flexboxgrid": "^6.3.0",
     "hls.js": "~0.6.2-3",
-    "jquery": "~2.2.3",
+    "jquery": "^3.3.1",
     "material-ui": "^1.0.0-beta.13",
     "material-ui-icons": "^1.0.0-alpha.19",
     "moment": "~2.14.1",

client/src/components/Admin.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Paper } from 'material-ui';
+import Switch from 'material-ui/Switch';
+import { FormControlLabel, FormGroup } from 'material-ui/Form';
+
+const parentSiteName = require('config').default.parentSiteName;
+const logo = require('../images/logo.png');
+const jQuery = require('jquery');
+
+require('styles/Admin.scss');
+
+class AdminComponent extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      eps: props.eps,
+      switches: []
+    };
+    this.apiEndpoint = props.apiEndpoint;
+  }
+
+  componentDidMount() {
+    jQuery.when(
+      // get our stored list of what episodes are enabled/disabled
+      jQuery.ajax({
+        url: `${this.apiEndpoint}/admin/getEpisodes`,
+        xhrFields: { withCredentials: true },
+      }),
+      // get our list of all episodes, unfiltered since this is the admin pane
+      jQuery.ajax({
+        url: `${this.apiEndpoint}/recent?filter=0`,
+      })
+    ).done(function (episodeStateData, allEpisodeData) {
+      let tempSwitches = allEpisodeData[0].map(episode => {
+        let foundElement = episodeStateData[0].find(el => el.value === episode.guid);
+        episode.checked = foundElement ? foundElement.enabled : false;
+        episode.value = episode.guid;
+        return episode;
+      });
+      this.setState({
+        switches: tempSwitches
+      });
+    }.bind(this));
+  }
+
+  renderSwitches() {
+    return this.state.switches
+      .map((el, index) =>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={el.checked}
+                value={el.value}
+                onChange={this.handleClick.bind(this,index)}
+              />
+            }
+            key={el.value}
+            label={el.title}
+          />
+      );
+  }
+
+  handleClick(index) {
+    let switches = this.state.switches;
+    switches[index].checked = !switches[index].checked;
+    this.setState({
+      switches,
+    }, () => {
+      jQuery.ajax({
+        type: 'POST',
+        url: `${this.apiEndpoint}/admin/setEpisode`,
+        xhrFields: { withCredentials: true },
+        data: {
+          guid: switches[index].guid,
+          enabled: switches[index].checked
+        }
+      });
+      this.forceUpdate()
+    });
+  }
+
+  render() {
+    return(
+    <div>
+      <Paper>
+        <div className="hero-space">
+          <div className="hero-content">
+            <img src={logo} className="logo" alt={parentSiteName}/>
+            <h2 className="tagline">Admin Panel</h2>
+          </div>
+        </div>
+        <div className="content episodes">
+          <h3 className="recent-episodes">Enable/Disable Episodes</h3>
+            <FormGroup>
+            {this.renderSwitches.call(this)}
+            </FormGroup>
+        </div>
+      </Paper>
+    </div>
+    );
+  }
+}
+
+export default AdminComponent;

client/src/components/Main.js

@@ -7,6 +7,7 @@ const Store = require('store'); // localStorage
 const isSecure =  window.location.protocol == 'https:';
 const apiEndpoint_default = isSecure ? require('config').default.apiEndpointSsl : require('config').default.apiEndpoint;
 const dataBucket = require('config').default.dataBucket;
+const useRSS = require('config').default.useRSS;
 const maxClipSeconds = require('config').default.maxClipSeconds;
 const minClipSeconds = require('config').default.minClipSeconds;
 const env = require('config').default.appEnv;
@@ -41,6 +42,7 @@ import NavBar from 'components/NavBarComponent';
 import Loader from 'components/LoadingAnimationComponent';
 import ShareContainer from 'components/ShareContainerComponent';
 import Landing from 'components/Landing';
+import Admin from 'components/Admin';
 import Helpers from '../helpers';
 
 /** The root React component */
@@ -52,6 +54,7 @@ class AppComponent extends React.Component {
   constructor(props) {
     super(props);
     let localState, defaultState, userState;
+    let apiEndpoint = apiEndpoint_default;
 
     // Required for the Material UI theme
     injectTapEventPlugin();
@@ -105,11 +108,12 @@ class AppComponent extends React.Component {
 
     // get episode data rendered by server
     this.state.eps = window.__latestEpisodes || props.eps;
-    // BUT, if we're in a development environment, just grab the JSON file of all episodes and overwrite
+    // BUT, if we're in a development environment, just grab the JSON/RSS file of all episodes and overwrite
     if (env === 'dev') {
+      let devUrl = useRSS ? apiEndpoint + '/rss' : apiEndpoint + '/recent';
       jQuery.ajax({
         method: 'GET',
-        url:  dataBucket + 'episodes.json',
+        url: devUrl,
         crossDomain : true,
         headers: {'X-Requested-With': 'XMLHttpRequest'},
         success: (data) => {
@@ -123,7 +127,7 @@ class AppComponent extends React.Component {
           });
           window.console.error(this.props.url, status, err.toString());
         }.bind(this)
-      })
+      });
     }
 
     this.state.episodesWithProblems = window.__inactiveEpisodes || require('config').default.episodesWithProblems;
@@ -832,6 +836,13 @@ class AppComponent extends React.Component {
     let content;
 
     switch(this.state.view) {
+      case 'admin':
+        content =
+          <Admin
+            eps={this.state.eps}
+            apiEndpoint={apiEndpoint_default}
+          />;
+        break;
       case 'about':
         content =
           <div className="content">

client/src/config/base.js.template

@@ -13,5 +13,8 @@ export default {
   // Uncomment this and add your cloudFront domain to enable Amazon Cloudfront CDN,
   // make sure to have CORS headers whitelisted!
   // cloudFrontDomain: 'dxxxxxxxxxx.cloudfront.net',
-  episodesWithProblems: []
+  episodesWithProblems: [],
+  // set `useRSS` to `true` if you plan to use the RSS_FEED defined in server/.env as your
+  // source for episode metadata (recommended)
+  useRSS: false
 }

server/.env-template

@@ -32,3 +32,9 @@ CLOUDFRONT_URL=https://<ID>.cloudfront.net/
 # Array of bad episodes separated by commas, i.e. [443, 300]
 BAD_EPISODES=[]
 DATA_BUCKET=http://localhost:8080/
+
+# RSS feed URL (leave blank to use episodes.json stored in DATA_BUCKET instead)
+RSS_FEED=
+
+# Password for the admin panel
+ADMIN_PASSWORD=1234

server/.gitignore

@@ -40,3 +40,4 @@ node_modules
 _notes
 
 public/
+adminData.json

server/README.md

@@ -2,9 +2,9 @@
 
 Please refer to [the wiki](https://github.com/FeelTrainCoop/shortcut/wiki) instead. This README will soon be updated to reflect the current state of the project.
 
-# tal-server
+# shortcut-server
 A node/express server that
-- serves a single page application ("tal-client")
+- serves a single page application ("shortcut-client")
 - provides an API for handling social authentication for the client. Currently Twitter and Facebook are supported.
 - provides web hooks for updating individual episodes and the list of available episodes
 - ensures that only authorized requests can access episode data
@@ -16,7 +16,6 @@ A node/express server that
 ##### Install dependencies
 ```
 npm install
-npm install -g nodemon
 ```
 
 ##### Env Variables
@@ -28,8 +27,8 @@ Copy `.env-template` to `.env` and fill in environment variables.
 
 ### Build & run with Docker:
 - Mac only: eval "$(docker-machine env default)"
-- `docker build -t tal-server .`
-- `docker run -p 3000:3000 -d tal-server`
+- `docker build -t shortcut-server .`
+- `docker run -p 3000:3000 -d shortcut-server`
 - server will be running at docker-machine ip, i.e. `http://192.168.99.100:3000/`
 
 ### Run with Node: