Merge pull request #6 from wassgha/settings-user

Editing a display's name and status bar icons

api/models/Display.js

@@ -1,12 +1,19 @@
 const mongoose = require('mongoose')
+const shortid = require('shortid')
+
 const Schema = mongoose.Schema
 
 const Display = new Schema({
   name: { type: String },
   layout: { type: String, default: 'spaced', enum: ['compact', 'spaced'] },
   statusBar: {
-    type: [{ type: String, enum: ['time', 'date', 'connection', 'spacer'] }],
-    default: ['date', 'spacer', 'connection', 'time']
+    type: [{ type: String }],
+    default: () => [
+      'date_' + shortid.generate(),
+      'spacer_' + shortid.generate(),
+      'connection_' + shortid.generate(),
+      'time_' + shortid.generate()
+    ]
   },
   widgets: [{ type: Schema.Types.ObjectId, ref: 'Widget' }]
 })

components/Admin/EditableWidget.js

@@ -58,7 +58,6 @@ class EditableWidget extends React.Component {
             <FontAwesomeIcon icon={widget.icon || faTimes} size={'2x'} />
           </div>
           <span className={'type'}>{widget.name || 'Broken Widget'}</span>
-          {/* <span className={'name'}>NEWS</span> */}
         </div>
         <WidgetEditDialog ref={this.dialog} OptionsComponent={widget.Options} id={id} />
         <style jsx>

components/Admin/ScreenCard.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faWindowRestore } from '@fortawesome/free-regular-svg-icons'
 import { faChromecast } from '@fortawesome/free-brands-svg-icons'
-import { faTrash, faTv } from '@fortawesome/free-solid-svg-icons'
+import { faTrash, faTv, faEye, faLink } from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
 import { view } from 'react-easy-state'
 
@@ -41,6 +41,16 @@ class ScreenCard extends Component {
             </div>
           </div>
           <div className='right'>
+            <Link href={'/layout?display=' + value._id}>
+              <div className='actionIcon'>
+                <FontAwesomeIcon icon={faEye} fixedWidth color='#828282' />
+              </div>
+            </Link>
+            <Link href={'/display/' + value._id}>
+              <div className='actionIcon'>
+                <FontAwesomeIcon icon={faLink} fixedWidth color='#828282' />
+              </div>
+            </Link>
             <div className='actionIcon'>
               <FontAwesomeIcon
                 icon={faTrash}
@@ -159,8 +169,8 @@ class ScreenCard extends Component {
               }
 
               .actionIcon {
-                margin-right: 8px;
-                margin-left: 8px;
+                margin-right: 16px;
+                margin-left: 16px;
               }
             `}
           </style>

components/Admin/StatusBarElement.js

@@ -0,0 +1,127 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { library, config } from '@fortawesome/fontawesome-svg-core'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { Draggable } from 'react-beautiful-dnd'
+
+import { StatusBarElementTypes } from '../../helpers/statusbar.js'
+
+config.autoAddCss = false
+library.add(faTimes)
+
+class StatusBarElement extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  deleteClicked = e => {
+    if (e) e.stopPropagation()
+    const { onDelete = () => {} } = this.props
+    onDelete()
+  }
+
+  render() {
+    const { item, index } = this.props
+    const type = item.split('_')[0]
+    return (
+      <Draggable key={item} draggableId={item} index={index}>
+        {provided => (
+          <div
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            className={'statusBarEl'}
+            style={{
+              ...provided.draggableProps.style
+            }}
+          >
+            <div className={'controls'}>
+              <div className={'delete'} onClick={this.deleteClicked}>
+                <FontAwesomeIcon icon={faTimes} size={'xs'} fixedWidth />
+              </div>
+            </div>
+            <div className={'info'}>
+              <div className={'icon'}>
+                <FontAwesomeIcon icon={StatusBarElementTypes[type].icon || faTimes} size={'sm'} />
+              </div>
+              <span className={'type'}>{type || 'Unknown'}</span>
+            </div>
+            <style jsx>
+              {`
+                .statusBarEl {
+                  background-color: rgba(108, 108, 108, 1);
+                  border-radius: 6px;
+                  height: 100%;
+                  width: 100%;
+                  box-sizing: border-box;
+                  padding: 8px;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  cursor: move;
+                  overflow: hidden;
+                  position: relative;
+                }
+                .statusBarEl .info {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: center;
+                  align-items: center;
+                  color: white;
+                }
+                .statusBarEl .info .icon {
+                  color: white;
+                  margin-right: 16px;
+                }
+                .statusBarEl .info .type {
+                  color: white;
+                  font-family: 'Open Sans', sans-serif;
+                  text-transform: uppercase;
+                  font-size: 14px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  max-width: 100%;
+                }
+                .statusBarEl .controls {
+                  position: absolute;
+                  font-family: 'Open Sans', sans-serif;
+                  height: 100%;
+                  justify-content: flex-end;
+                  align-items: center;
+                  display: none;
+                  top: 0px;
+                  right: 0px;
+                }
+                .statusBarEl .delete {
+                  display: flex;
+                  font-family: 'Open Sans', sans-serif;
+                  width: 32px;
+                  height: 32px;
+                  justify-content: center;
+                  align-items: center;
+                  color: white;
+                  border-radius: 50%;
+                  cursor: pointer;
+                  margin-right: 8px;
+                }
+
+                .statusBarEl .delete {
+                  background: rgba(252, 50, 50, 0.6);
+                }
+
+                .statusBarEl:hover .controls {
+                  display: flex;
+                }
+              `}
+            </style>
+          </div>
+        )}
+      </Draggable>
+    )
+  }
+}
+
+export default StatusBarElement

components/Display/Frame.js

@@ -13,41 +13,28 @@ class Frame extends React.Component {
     super(props)
   }
 
-  renderStatusBarElement = type => {
-    return (
-      <div className={type}>
-        {type == 'date' ? (
-          <Clock ticking={true} format={'dddd, MMMM Do.'} />
-        ) : type == 'connection' ? (
-          <FontAwesomeIcon className={'wifi'} icon={faWifi} />
-        ) : type == 'time' ? (
-          <Clock ticking={true} format={'H:mm'} />
-        ) : (
-          ' '
-        )}
-      </div>
-    )
-  }
-
   render() {
     const { children, statusBar = [] } = this.props
     return (
       <div className='display'>
         {statusBar && statusBar.length > 0 && (
           <div className={'status'}>
-            {statusBar.map(type => (
-              <div className={type}>
-                {type == 'date' ? (
-                  <Clock ticking={true} format={'dddd, MMMM Do.'} />
-                ) : type == 'connection' ? (
-                  <FontAwesomeIcon className={'wifi'} icon={faWifi} />
-                ) : type == 'time' ? (
-                  <Clock ticking={true} format={'H:mm'} />
-                ) : (
-                  ' '
-                )}
-              </div>
-            ))}
+            {statusBar.map(item => {
+              const type = item.split('_')[0]
+              return (
+                <div className={type}>
+                  {type == 'date' ? (
+                    <Clock ticking={true} format={'dddd, MMMM Do.'} />
+                  ) : type == 'connection' ? (
+                    <FontAwesomeIcon className={'wifi'} icon={faWifi} />
+                  ) : type == 'time' ? (
+                    <Clock ticking={true} format={'H:mm'} />
+                  ) : (
+                    ' '
+                  )}
+                </div>
+              )
+            })}
           </div>
         )}
         {children}

helpers/statusbar.js

@@ -0,0 +1,27 @@
+import { library, config } from '@fortawesome/fontawesome-svg-core'
+import { faRss, faGripVertical, faClock, faCalendarAlt } from '@fortawesome/free-solid-svg-icons'
+
+config.autoAddCss = false
+library.add(faRss)
+library.add(faGripVertical)
+library.add(faClock)
+library.add(faCalendarAlt)
+
+export const StatusBarElementTypes = {
+  time: {
+    name: 'time',
+    icon: faClock
+  },
+  date: {
+    name: 'date',
+    icon: faCalendarAlt
+  },
+  spacer: {
+    name: 'spacer',
+    icon: faGripVertical
+  },
+  connection: {
+    name: 'connection',
+    icon: faRss
+  }
+}

package.json

@@ -61,6 +61,7 @@
     "passport-local": "^1.0.0",
     "passport-local-mongoose": "^5.0.1",
     "react": "^16.8.6",
+    "react-beautiful-dnd": "^11.0.4",
     "react-color": "^2.17.0",
     "react-content-loader": "^4.2.1",
     "react-dom": "^16.8.2",
@@ -74,10 +75,12 @@
     "react-sortable-hoc": "^1.8.3",
     "react-switch": "^5.0.0",
     "react-youtube": "^7.9.0",
+    "shortid": "^2.2.14",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",
     "styled-components": "^4.2.0",
     "superagent": "^5.0.5",
+    "uuid": "^3.3.2",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {

pages/index.js

@@ -22,7 +22,7 @@ class Index extends React.Component {
   }
 
   navigateToDisplay = id => {
-    Router.push('/display?display=' + id)
+    Router.push('/display/' + id)
   }
 
   render() {