Skip to content

Commit b69010e

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

File tree

1 file changed

+85
-68
lines changed

1 file changed

+85
-68
lines changed

‎src/App.js‎

Lines changed: 85 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ class App extends Component {
8686
}
8787
}
8888
async poll() {
89+
console.log(this.state.playlist)
8990
if (this.interval)
9091
clearTimeout(this.interval);
9192
try {
@@ -537,39 +538,39 @@ class App extends Component {
537538
let playlistDialog = null
538539
if (this.state.showCurrentPlaylist) {
539540
playlistDialog = (
540-
<div className="row" ref={this.playlistDialogRef}>
541-
<div className="col-lg-8">
541+
<>
542+
<div className="row mx-n2" ref={this.playlistDialogRef} key='a02'>
543+
<div className="py-1 col-8">
544+
<h5 className="">Current Playlist</h5>
545+
</div>
546+
</div>
547+
<div className="row">
548+
<div className="col-12">
542549
<div className="card" >
543550
<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">
551+
<div className="border border-secondary row rows-cols-2">
552+
<div className="col-8 p-1 mr-auto">
547553
<p>Pattern</p>
548554
</div>
549-
<div className="col-md-1 align-items-center row py-0 pr-0 text-left">
550-
<p>Duration(seconds)</p>
555+
<div className="col-3 p-1 col-auto">
556+
<p>Duration</p>
551557
</div>
552558
</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>
559+
{Array.isArray(this.state.playlist) && (this.state.playlist).map( (pattern, index) =>
560+
<div className="border border-secondary row rows-cols-2" key={index} >
561+
<div className="col-8 p-1 mr-auto" >
562+
{pattern.name}
567563
</div>
564+
<div className="col-3 p-1 col-auto">
565+
{pattern.duration}
566+
</div>
567+
</div>
568568
)}
569569
</div>
570570
</div>
571571
</div>
572572
</div>
573+
</>
573574
)
574575
}
575576

@@ -589,35 +590,40 @@ class App extends Component {
589590
<main role="main">
590591
<hr/>
591592

592-
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n2">
593+
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n3">
593594
<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
595+
<div className="row px-xl-1 px-lg-1 px-md-1 px-3">
596+
<div className="col-xl-2 px-xl-1 col-lg-2 px-lg-1 col-md-4 col-10 px-2">
597+
<h3>Controllers</h3>
598+
</div>
599+
<div className="col-xl-2 px-xl-2 col-lg-1 px-lg-5 col-md-2 col-2 px-2">
596600
<button className="btn btn-primary " onClick={this.handleReload} style={{marginLeft:"6px"}}>↻</button>
597-
</h3>
601+
</div>
598602
</div>
599603
</div>
600604
<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>
605+
<div className="navbrightness no-learning-ui row no-gutters pull-right">
606+
<label>
607+
<span role="img" aria-label="light bulb emoji for pixelblaze brightness">💡</span>
608+
<input
609+
id="brightness"
610+
type="range"
611+
className="form-control"
612+
onChange={async (e) => {
613+
await this.changeBrightness(e)
614+
}}
615+
min="0"
616+
max="1"
617+
step=".005"
618+
title={`Brightness ${Math.round(this.state.brightness * 100) }%`}
619+
value={(this.state.brightness !== null) && this.state.brightness}
620+
/>
621+
</label>
622+
</div>
619623
</div>
620-
<div className="col-lg-12">
624+
</div>
625+
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n3">
626+
<div className="col-xl-12 px-xl-2 col-lg-12">
621627
<ul className="list-group" id="list">
622628
{this.state.discoveries.map(d => {
623629
const dName = d.name
@@ -640,31 +646,42 @@ class App extends Component {
640646

641647
{cloneDialog}
642648
{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>
649+
<div className="row mx-xl-n4 mx-lg-n4 mx-md-n4 mx-n4">
650+
<div className="py-1 col-xl-12 px-xl-4 col-lg-12 px-lg-4 col-md-12 col-12 px-4">
651+
<div className="row px-xl-2 pr-lg-2 px-md-2 px-2">
652+
<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">
653+
<h3>
654+
Patterns
655+
</h3>
656+
</div>
657+
<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">
658+
<button
659+
className="btn btn-secondary text-left playlist btn-playlist-bulk"
660+
disabled={this.state.deactivateEnableAllButton}
661+
onClick={this.enableAllPatterns}>
662+
Enable All
663+
</button>
664+
</div>
665+
<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">
666+
<button
667+
className="btn btn-secondary text-left playlist btn-playlist-bulk"
668+
disabled={this.state.deactivateDisableAllButton}
669+
onClick={this.disableAllPatterns}>
670+
Disable All
671+
</button>
672+
</div>
673+
<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">
674+
<button
675+
className="btn btn-secondary text-left btn-playlist-bulk"
676+
onClick={(e) => this.openPlaylistDialog(e)}>
677+
View Current Playlist
678+
</button>
679+
</div>
680+
</div>
667681
</div>
682+
</div>
683+
<div className="row mx-xl-n4 mx-n4">
684+
668685
</div>
669686
<div className="list-group">
670687
{(this.state.isProcessing) &&

0 commit comments

Comments
 (0)