Skip to content

Commit 209d069

Browse files
caleygcaleyg
committed
more style fixes and type checking where it matters
1 parent 47fb8d1 commit 209d069

4 files changed

Lines changed: 97 additions & 81 deletions

File tree

‎app/brightness.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,22 @@ class Brightness {
3333
sendCommand(pixelBlazeIds, null, brightness)
3434
await this.storeBrightness(brightness);
3535
currentBrightness = brightness
36-
if(this.utils) {
37-
await this.utils.broadcastMessage({currentBrightness: currentBrightness})
38-
}
36+
await this.sendBrightnessMessage(currentBrightness)
3937
}, 1000)
4038
getBrightness = async () =>{
41-
if(this.utils) {
42-
await this.utils.broadcastMessage({currentBrightness: currentBrightness})
43-
}
39+
await this.sendBrightnessMessage(currentBrightness)
4440
}
4541
storeBrightness = async (brightness) => {
4642
const body = {
4743
value: brightness
4844
}
4945
await updateBrightness(body)
5046
}
51-
47+
sendBrightnessMessage = async (currentBrightness) => {
48+
if (this.utils) {
49+
await this.utils.broadcastMessage({currentBrightness: currentBrightness})
50+
}
51+
}
5252
}
5353
// Initializing the brightness loop outside the websocket
5454
// because we might not always have a browser open when
@@ -59,7 +59,7 @@ initThe = new Brightness()
5959
initThe.adjustBrightness(currentBrightness)
6060
.then(() =>{})
6161

62-
module.exports.BrightnessWebsocket = function (utils) {
62+
module.exports.BrightnessWebsocketMessageHandler = function (utils) {
6363
const brightness = new Brightness(utils)
6464
this.utils = utils
6565
this.receiveMessage = async function (data) {

‎app/firestormWebsocket.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const WebSocketServer = require('ws').Server
2-
const {PlaylistWebSocket} = require('./playlist')
2+
const {PlaylistWebSocketMessageHandler} = require('./playlist')
33
const {Utils} = require('./utils')
4-
const {BrightnessWebsocket} = require("./brightness");
4+
const {BrightnessWebsocketMessageHandler} = require("./brightness");
55

66
// start playlist server
77
const address = '0.0.0.0';
@@ -10,8 +10,8 @@ const firestormServer = new WebSocketServer({host: address , port: port});
1010
console.log(`Firestorm server is running on ${address}:${port}`);
1111
firestormServer.on('connection', function (connection) {
1212
const utils = new Utils(connection)
13-
const brightnessWebsocket = new BrightnessWebsocket(utils)
14-
const playlistWebSocket = new PlaylistWebSocket(utils)
13+
const brightnessWebsocket = new BrightnessWebsocketMessageHandler(utils)
14+
const playlistWebSocket = new PlaylistWebSocketMessageHandler(utils)
1515
if(utils.addFirestormClient(connection)) {
1616
return
1717
}

‎app/playlist.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ initThe.playlistLoop()
140140
.then(() => {})
141141

142142

143-
module.exports.PlaylistWebSocket = function (utils) {
143+
module.exports.PlaylistWebSocketMessageHandler = function (utils) {
144144
const playlist = new Playlist(utils)
145145
this.utils = utils
146146
this.receiveMessage = async function (data) {

‎src/App.js‎

Lines changed: 84 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -537,39 +537,39 @@ class App extends Component {
537537
let playlistDialog = null
538538
if (this.state.showCurrentPlaylist) {
539539
playlistDialog = (
540-
<div className="row" ref={this.playlistDialogRef}>
541-
<div className="col-lg-8">
540+
<>
541+
<div className="row mx-n2" ref={this.playlistDialogRef} key='a02'>
542+
<div className="py-1 col-8">
543+
<h5 className="">Current Playlist</h5>
544+
</div>
545+
</div>
546+
<div className="row">
547+
<div className="col-12">
542548
<div className="card" >
543549
<div className="card-body">
544-
<h5 className="card-title">Current Playlist</h5>
545-
<div className="row no-gutters align-items-center">
546-
<div className="col-md-7 p-0">
550+
<div className="border border-secondary row rows-cols-2">
551+
<div className="col-8 p-1 mr-auto">
547552
<p>Pattern</p>
548553
</div>
549-
<div className="col-md-1 align-items-center row py-0 pr-0 text-left">
550-
<p>Duration(seconds)</p>
554+
<div className="col-3 p-1 col-auto">
555+
<p>Duration</p>
551556
</div>
552557
</div>
553-
{(this.state.playlist).map( (pattern, index) =>
554-
<div className="row no-gutters list-group-item py-0 pr-0" key={index}>
555-
<div className="row align-items-center">
556-
<div className="col-md-6 p-0">
557-
<div className="p-2 m-auto">
558-
{pattern.name}
559-
</div>
560-
</div>
561-
<div className="col-md-1 py-0 pr-0 row no-gutters text-left">
562-
<div className="p-2 m-auto">
563-
{pattern.duration}
564-
</div>
565-
</div>
566-
</div>
558+
{Array.isArray(this.state.playlist) && (this.state.playlist).map( (pattern, index) =>
559+
<div className="border border-secondary row rows-cols-2" key={index} >
560+
<div className="col-8 p-1 mr-auto" >
561+
{pattern.name}
567562
</div>
563+
<div className="col-3 p-1 col-auto">
564+
{pattern.duration}
565+
</div>
566+
</div>
568567
)}
569568
</div>
570569
</div>
571570
</div>
572571
</div>
572+
</>
573573
)
574574
}
575575

@@ -589,35 +589,40 @@ class App extends Component {
589589
<main role="main">
590590
<hr/>
591591

592-
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n2">
592+
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n3">
593593
<div className="py-1 col-xl-10 px-xl-2 col-lg-9 px-lg-3 col-md-8 px-md-3 col-6 px-1">
594-
<div className="row no-gutters">
595-
<h3>Controllers
594+
<div className="row px-xl-1 px-lg-1 px-md-1 px-3">
595+
<div className="col-xl-2 px-xl-1 col-lg-2 px-lg-1 col-md-4 col-10 px-2">
596+
<h3>Controllers</h3>
597+
</div>
598+
<div className="col-xl-2 px-xl-2 col-lg-1 px-lg-5 col-md-2 col-2 px-2">
596599
<button className="btn btn-primary " onClick={this.handleReload} style={{marginLeft:"6px"}}>↻</button>
597-
</h3>
600+
</div>
598601
</div>
599602
</div>
600603
<div className="py-1 col-xl-1 px-xl-1 col-lg-3 px-lg-5 col-md-4 px-md-5 col-2 px-1">
601-
<div className="navbrightness no-learning-ui row no-gutters pull-right">
602-
<label>
603-
<span role="img" aria-label="light bulb emoji for pixelblaze brightness">💡</span>
604-
<input
605-
id="brightness"
606-
type="range"
607-
className="form-control"
608-
onChange={async (e) => {
609-
await this.changeBrightness(e)
610-
}}
611-
min="0"
612-
max="1"
613-
step=".005"
614-
title={`Brightness ${Math.round(this.state.brightness * 100) }%`}
615-
value={(this.state.brightness !== null) && this.state.brightness}
616-
/>
617-
</label>
618-
</div>
604+
<div className="navbrightness no-learning-ui row no-gutters pull-right">
605+
<label>
606+
<span role="img" aria-label="light bulb emoji for pixelblaze brightness">💡</span>
607+
<input
608+
id="brightness"
609+
type="range"
610+
className="form-control"
611+
onChange={async (e) => {
612+
await this.changeBrightness(e)
613+
}}
614+
min="0"
615+
max="1"
616+
step=".005"
617+
title={`Brightness ${Math.round(this.state.brightness * 100) }%`}
618+
value={(this.state.brightness !== null) && this.state.brightness}
619+
/>
620+
</label>
621+
</div>
619622
</div>
620-
<div className="col-lg-12">
623+
</div>
624+
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n3">
625+
<div className="col-xl-12 px-xl-2 col-lg-12">
621626
<ul className="list-group" id="list">
622627
{this.state.discoveries.map(d => {
623628
const dName = d.name
@@ -640,31 +645,42 @@ class App extends Component {
640645

641646
{cloneDialog}
642647
{playlistDialog}
643-
<div className="row mx-xl-n4 mx-n4">
644-
<div className="py-1 col-xl-7 px-xl-4 col-3 px-4">
645-
<h3>
646-
Patterns
647-
</h3>
648-
</div>
649-
<div className="py-2 col-xl-5 px-xl-5 col-12 px-4">
650-
<button
651-
className="btn btn-secondary text-left playlist btn-playlist-bulk"
652-
disabled={this.state.deactivateEnableAllButton}
653-
onClick={this.enableAllPatterns}>
654-
Enable All
655-
</button>
656-
<button
657-
className="btn btn-secondary text-left playlist btn-playlist-bulk"
658-
disabled={this.state.deactivateDisableAllButton}
659-
onClick={this.disableAllPatterns}>
660-
Disable All
661-
</button>
662-
<button
663-
className="btn btn-secondary text-left btn-playlist-bulk"
664-
onClick={(e) => this.openPlaylistDialog(e)}>
665-
View Current Playlist
666-
</button>
648+
<div className="row mx-xl-n4 mx-lg-n4 mx-md-n4 mx-n4">
649+
<div className="py-1 col-xl-12 px-xl-4 col-lg-12 px-lg-4 col-md-12 col-12 px-4">
650+
<div className="row px-xl-2 pr-lg-2 px-md-2 px-2">
651+
<div className="col-xl-1 px-xl-1 mr-xl-auto col-lg-1 px-lg-1 mr-lg-auto col-md-1 px-md-1 mr-md-auto col-12 px-1">
652+
<h3>
653+
Patterns
654+
</h3>
655+
</div>
656+
<div className="py-2 col-xl-auto px-xl-1 col-lg-auto px-lg-1 col-md-auto px-md-1 col-auto px-1">
657+
<button
658+
className="btn btn-secondary text-left playlist btn-playlist-bulk"
659+
disabled={this.state.deactivateEnableAllButton}
660+
onClick={this.enableAllPatterns}>
661+
Enable All
662+
</button>
663+
</div>
664+
<div className="py-2 col-xl-auto px-xl-1 col-lg-auto px-lg-1 col-md-auto px-md-1 col-auto px-1">
665+
<button
666+
className="btn btn-secondary text-left playlist btn-playlist-bulk"
667+
disabled={this.state.deactivateDisableAllButton}
668+
onClick={this.disableAllPatterns}>
669+
Disable All
670+
</button>
671+
</div>
672+
<div className="py-2 col-xl-auto px-xl-1 col-lg-auto px-lg-1 col-md-auto px-md-1 col-auto px-1">
673+
<button
674+
className="btn btn-secondary text-left btn-playlist-bulk"
675+
onClick={(e) => this.openPlaylistDialog(e)}>
676+
View Current Playlist
677+
</button>
678+
</div>
679+
</div>
667680
</div>
681+
</div>
682+
<div className="row mx-xl-n4 mx-n4">
683+
668684
</div>
669685
<div className="list-group">
670686
{(this.state.isProcessing) &&

0 commit comments

Comments
 (0)