Merge pull request #2 from wassgha/autosetup

Added a setup utility for automatic configuration on the first run

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "lts/*"
+  - 'lts/*'
 install: npm install
 script:
   - npm run lint

README.md

@@ -25,11 +25,14 @@ Use the demo website at [http://digitaldisplay.herokuapp.com](http://digitaldisp
 
 ### How to Run:
 
-1. Set up a MongoDB installation locally and create a `digitaldisplay` database
+1. Set up a MongoDB installation locally (or in the cloud) and create a `digitaldisplay` database
 
-2. Rename the `.env.example` file to `.env`
+2. Run the setup utility using
 
-3. Change references to the database to link to your local database (usually `mongodb://localhost:27017/digitaldisplay`)
+```bash
+npm run setup
+```
+and specify the URI to your database.
 
 4. Install dependencies and run the program
 

api/models/Slide.js

@@ -6,7 +6,7 @@ const Slide = new Schema({
   type: {
     type: String,
     default: 'photo',
-    enum: ['photo', 'web', 'youtube', 'video', 'freeform']
+    enum: ['photo', 'web', 'youtube', 'video']
   },
   title: { type: String },
   description: { type: String },

components/Admin/SlideCard.js

@@ -2,7 +2,7 @@ import { Component } from 'react'
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faClock } from '@fortawesome/free-regular-svg-icons'
-import { faTrash, faEdit, faPlay, faGlobe, faShapes } from '@fortawesome/free-solid-svg-icons'
+import { faTrash, faEdit, faPlay, faGlobe } from '@fortawesome/free-solid-svg-icons'
 
 import SlideEditDialog from './SlideEditDialog'
 
@@ -34,8 +34,6 @@ class SlideCard extends Component {
                   ? '#c23616'
                   : value.type == 'web'
                   ? '#0097e6'
-                  : value.type == 'freeform'
-                  ? '#E68300'
                   : 'transparent'
             }}
           >
@@ -45,9 +43,6 @@ class SlideCard extends Component {
             {value.type == 'web' && (
               <FontAwesomeIcon icon={faGlobe} fixedWidth size='lg' color='#FFFFFF' />
             )}
-            {value.type == 'freeform' && (
-              <FontAwesomeIcon icon={faShapes} fixedWidth size='lg' color='#FFFFFF' />
-            )}
           </div>
         </div>
         <div className='middle'>

components/Admin/SlideEditDialog.js

@@ -106,8 +106,7 @@ class SlideEditDialog extends React.Component {
             choices={[
               { id: 'youtube', label: 'Youtube Video' },
               { id: 'web', label: 'Web Page' },
-              { id: 'photo', label: 'Photo' },
-              { id: 'freeform', label: 'Freeform Editor' }
+              { id: 'photo', label: 'Photo' }
             ]}
             onChange={this.handleChange}
           />
@@ -120,14 +119,6 @@ class SlideEditDialog extends React.Component {
               onChange={this.handleChange}
               inline={true}
             />
-          ) : type == 'freeform' || upload ? (
-            <Input
-              type={'freeform'}
-              label={'Slide content'}
-              name={'data'}
-              value={data}
-              onChange={this.handleChange}
-            />
           ) : (
             <Input
               type={'text'}

components/Form/Input.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import ColorPicker from './ColorPicker'
-import FreeformEditor from '../FreeformEditor'
 import ContentLoader from 'react-content-loader'
 import dynamic from 'next/dynamic'
 
@@ -124,8 +123,6 @@ class Input extends React.Component {
               )
             }}
           </DropzoneWithNoSSR>
-        ) : type == 'freeform' ? (
-          <FreeformEditor data={value} onChange={this.handleChange} />
         ) : (
           <textarea
             onChange={this.handleInputChange}

makeconf.json

@@ -0,0 +1,25 @@
+{
+  "format": ".env",
+  "file": ".env",
+  "config": {
+    "MONGODB_URI": {
+      "description": "Your MongoDB URI (remote or local)",
+      "required": true
+    },
+    "PORT": {
+      "description": "Which port should the server run on?",
+      "default": "3001",
+      "required": true
+    },
+    "ENVIRON": {
+      "description": "Environment (DEV or PROD)",
+      "default": "DEV",
+      "required": true
+    },
+    "SESSION_SECRET": {
+      "description": "Session secret key (can be anything)",
+      "default": "3i2br082jrfdsufnsfk10",
+      "required": true
+    }
+  }
+}

package.json

@@ -4,10 +4,11 @@
   "description": "This is a user interface for a dynamic digital signage",
   "main": "index.js",
   "scripts": {
-    "dev": "cross-env NODE_ENV=dev node server.js",
+    "setup": "[ -f .env ] || makeconf",
+    "dev": "ENVIRON=DEV node server.js",
     "build": "next build",
     "lint": "eslint --color ./ *.js",
-    "start": "NODE_ENV=production node server.js",
+    "start": "ENVIRON=PROD node server.js",
     "test": "echo \"No test specified yet.\" && exit 0",
     "heroku-postbuild": "next build"
   },
@@ -46,6 +47,7 @@
     "isomorphic-unfetch": "^3.0.0",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.11",
+    "makeconf": "^1.4.4",
     "mongoose": "^5.4.19",
     "mongoose-crudify": "^0.2.0",
     "multer": "^1.4.1",
@@ -59,7 +61,6 @@
     "react": "^16.8.6",
     "react-color": "^2.17.0",
     "react-content-loader": "^4.2.1",
-    "react-designer": "git+https://github.com/react-designer/react-designer",
     "react-dom": "^16.8.2",
     "react-dropzone": "^10.0.0",
     "react-grid-layout": "^0.16.6",

server.js

@@ -8,14 +8,13 @@ const session = require('cookie-session')
 const bodyParser = require('body-parser')
 const socketIo = require('socket.io')
 
-const dev = process.env.NODE_ENV !== 'production'
-const port = process.env.PORT || 3000
+const Keys = require('./keys')
+
+const dev = Keys.ENVIRON !== 'PROD'
 const app = next({ dev })
 const routes = require('./routes')
 const handle = routes.getRequestHandler(app)
 
-const Keys = require('./keys')
-
 const apiRoutes = require('./api/routes')
 const User = require('./api/models/User')
 
@@ -80,10 +79,10 @@ app
       return handle(req, res)
     })
 
-    const finalServer = server.listen(port, err => {
+    const finalServer = server.listen(Keys.PORT, err => {
       if (err) throw err
       // eslint-disable-next-line
-      console.log('> Ready on http://localhost:' + port)
+      console.log('> Ready on http://localhost:' + Keys.PORT)
     })
 
     // Socket.io

widgets/slideshow/src/Slideshow.js

@@ -11,7 +11,6 @@ import GenericSlide from './Slide/Generic'
 import PhotoSlide from './Slide/Photo'
 import YoutubeSlide from './Slide/Youtube'
 import WebSlide from './Slide/Web'
-import FreeformSlide from './Slide/Freeform'
 import Progress from './Progress'
 
 import { getSlides } from '../../../actions/slide'
@@ -101,8 +100,6 @@ class Slideshow extends Component {
         return YoutubeSlide
       case 'web':
         return WebSlide
-      case 'freeform':
-        return FreeformSlide
       default:
         return GenericSlide
     }