From c52ffddf8ab3e98f775f5f3dbd70a3b2983e6c72 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Sat, 15 Jun 2019 15:59:54 -0400 Subject: [PATCH 1/3] Added ability to change display name --- pages/layout.js | 46 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/pages/layout.js b/pages/layout.js index bcda892..389dfce 100644 --- a/pages/layout.js +++ b/pages/layout.js @@ -1,5 +1,6 @@ import React from 'react' -import { faThLarge, faTh } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faThLarge, faTh, faPencilAlt } from '@fortawesome/free-solid-svg-icons' import GridLayout from 'react-grid-layout' import { view } from 'react-easy-state' @@ -81,6 +82,25 @@ class Layout extends React.Component {

Layout

+
+ { + const target = event.target + const title = target && target.value + display.updateName(title) + }} + onClick={e => { + if (e) e.stopPropagation() + }} + size={display && display.name && display.name.length} + /> +
+ +
+
From 2d7153faf33a31882a5310491782907820607118 Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Sat, 15 Jun 2019 19:18:48 -0400 Subject: [PATCH 2/3] Added ability to edit status bar elements --- api/models/Display.js | 11 ++- components/Admin/EditableWidget.js | 1 - components/Admin/StatusBarElement.js | 127 +++++++++++++++++++++++++++ components/Display/Frame.js | 45 ++++------ helpers/statusbar.js | 27 ++++++ package.json | 3 + pages/layout.js | 64 ++++++++++++++ stores/display.js | 18 ++++ 8 files changed, 264 insertions(+), 32 deletions(-) create mode 100644 components/Admin/StatusBarElement.js create mode 100644 helpers/statusbar.js diff --git a/api/models/Display.js b/api/models/Display.js index 5b6defd..3208045 100644 --- a/api/models/Display.js +++ b/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' }] }) diff --git a/components/Admin/EditableWidget.js b/components/Admin/EditableWidget.js index 9275499..e274f28 100644 --- a/components/Admin/EditableWidget.js +++ b/components/Admin/EditableWidget.js @@ -58,7 +58,6 @@ class EditableWidget extends React.Component {
{widget.name || 'Broken Widget'} - {/* NEWS */} + + )} + + ) + } +} + +export default StatusBarElement diff --git a/components/Display/Frame.js b/components/Display/Frame.js index 5b47ee9..8c6aedc 100644 --- a/components/Display/Frame.js +++ b/components/Display/Frame.js @@ -13,41 +13,28 @@ class Frame extends React.Component { super(props) } - renderStatusBarElement = type => { - return ( -
- {type == 'date' ? ( - - ) : type == 'connection' ? ( - - ) : type == 'time' ? ( - - ) : ( - ' ' - )} -
- ) - } - render() { const { children, statusBar = [] } = this.props return (
{statusBar && statusBar.length > 0 && (
- {statusBar.map(type => ( -
- {type == 'date' ? ( - - ) : type == 'connection' ? ( - - ) : type == 'time' ? ( - - ) : ( - ' ' - )} -
- ))} + {statusBar.map(item => { + const type = item.split('_')[0] + return ( +
+ {type == 'date' ? ( + + ) : type == 'connection' ? ( + + ) : type == 'time' ? ( + + ) : ( + ' ' + )} +
+ ) + })}
)} {children} diff --git a/helpers/statusbar.js b/helpers/statusbar.js new file mode 100644 index 0000000..f1df6ad --- /dev/null +++ b/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 + } +} diff --git a/package.json b/package.json index cbad24a..8e74b40 100644 --- a/package.json +++ b/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": { diff --git a/pages/layout.js b/pages/layout.js index 389dfce..3492005 100644 --- a/pages/layout.js +++ b/pages/layout.js @@ -3,14 +3,18 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faThLarge, faTh, faPencilAlt } from '@fortawesome/free-solid-svg-icons' import GridLayout from 'react-grid-layout' import { view } from 'react-easy-state' +import { DragDropContext, Droppable } from 'react-beautiful-dnd' import Frame from '../components/Admin/Frame.js' import EditableWidget from '../components/Admin/EditableWidget' +import StatusBarElement from '../components/Admin/StatusBarElement' import WidthProvider from '../components/Widgets/WidthProvider' import DropdownButton from '../components/DropdownButton' import { Form, Switch } from '../components/Form' +import { StatusBarElementTypes } from '../helpers/statusbar.js' + import Widgets from '../widgets' import { addWidget, getWidgets, deleteWidget, updateWidget } from '../actions/widgets' @@ -67,6 +71,14 @@ class Layout extends React.Component { } } + onDragEnd = result => { + if (!result.destination) { + return + } + + display.reorderStatusBarItems(result.source.index, result.destination.index) + } + render() { const { widgets } = this.state const { loggedIn } = this.props @@ -102,6 +114,51 @@ class Layout extends React.Component {
+
+ ({ + key: statusBarEl, + name: StatusBarElementTypes[statusBarEl].name, + icon: StatusBarElementTypes[statusBarEl].icon + }))} + /> +
+
+ {display && display.statusBar && ( + + + {provided => ( +
+ {display.statusBar.map((item, index) => ( + + ))} + {provided.placeholder} +
+ )} + + + )} +
{ return DisplayActions.updateDisplay(id, data) @@ -35,6 +36,23 @@ const display = store({ if (!layout || !['spaced', 'compact'].includes(layout)) return display.layout = layout updateDisplayThrottled(display.id, { layout }) + }, + addStatusBarItem(type) { + display.statusBar = [...display.statusBar, type + '_' + shortid.generate()] + updateDisplayThrottled(display.id, { statusBar: display.statusBar }) + return Promise.resolve() + }, + removeStatusBarItem(id) { + display.statusBar = [...display.statusBar.slice(0, id).concat(display.statusBar.slice(id + 1))] + updateDisplayThrottled(display.id, { statusBar: display.statusBar }) + }, + reorderStatusBarItems(startIndex, endIndex) { + const result = Array.from(display.statusBar) + const [removed] = result.splice(startIndex, 1) + result.splice(endIndex, 0, removed) + + display.statusBar = result + updateDisplayThrottled(display.id, { statusBar: display.statusBar }) } }) From 61d924cb10c293f72815f2fa13f7fbe88cab161f Mon Sep 17 00:00:00 2001 From: Wassim Gharbi Date: Sat, 15 Jun 2019 19:53:44 -0400 Subject: [PATCH 3/3] Added preview/display icons to the screens page --- components/Admin/ScreenCard.js | 16 +++++++++++++--- pages/index.js | 2 +- routes.js | 4 +++- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/components/Admin/ScreenCard.js b/components/Admin/ScreenCard.js index e2d9c16..2398111 100644 --- a/components/Admin/ScreenCard.js +++ b/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 {
+ +
+ +
+ + +
+ +
+
diff --git a/pages/index.js b/pages/index.js index 11e784a..6d4fbc7 100644 --- a/pages/index.js +++ b/pages/index.js @@ -22,7 +22,7 @@ class Index extends React.Component { } navigateToDisplay = id => { - Router.push('/display?display=' + id) + Router.push('/display/' + id) } render() { diff --git a/routes.js b/routes.js index 5643335..7cd43d8 100644 --- a/routes.js +++ b/routes.js @@ -1,3 +1,5 @@ const routes = require('next-routes') -module.exports = routes().add('/slideshow/:id', 'slideshow') +module.exports = routes() + .add('/slideshow/:id', 'slideshow') + .add('/display/:display', 'display')