Skip to content

Commit

Permalink
more style fixes and type checking where it matters
Browse files Browse the repository at this point in the history
  • Loading branch information
@caleyg
caleyg committed Apr 26, 2023
1 parent 47fb8d1 commit b69010e
Showing 1 changed file with 85 additions and 68 deletions.
153 changes: 85 additions & 68 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ class App extends Component {
}
}
async poll() {
console.log(this.state.playlist)
if (this.interval)
clearTimeout(this.interval);
try {
Expand Down Expand Up @@ -537,39 +538,39 @@ class App extends Component {
let playlistDialog = null
if (this.state.showCurrentPlaylist) {
playlistDialog = (
<div className="row" ref={this.playlistDialogRef}>
<div className="col-lg-8">
<>
<div className="row mx-n2" ref={this.playlistDialogRef} key='a02'>
<div className="py-1 col-8">
<h5 className="">Current Playlist</h5>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="card" >
<div className="card-body">
<h5 className="card-title">Current Playlist</h5>
<div className="row no-gutters align-items-center">
<div className="col-md-7 p-0">
<div className="border border-secondary row rows-cols-2">
<div className="col-8 p-1 mr-auto">
<p>Pattern</p>
</div>
<div className="col-md-1 align-items-center row py-0 pr-0 text-left">
<p>Duration(seconds)</p>
<div className="col-3 p-1 col-auto">
<p>Duration</p>
</div>
</div>
{(this.state.playlist).map( (pattern, index) =>
<div className="row no-gutters list-group-item py-0 pr-0" key={index}>
<div className="row align-items-center">
<div className="col-md-6 p-0">
<div className="p-2 m-auto">
{pattern.name}
</div>
</div>
<div className="col-md-1 py-0 pr-0 row no-gutters text-left">
<div className="p-2 m-auto">
{pattern.duration}
</div>
</div>
</div>
{Array.isArray(this.state.playlist) && (this.state.playlist).map( (pattern, index) =>
<div className="border border-secondary row rows-cols-2" key={index} >
<div className="col-8 p-1 mr-auto" >
{pattern.name}
</div>
<div className="col-3 p-1 col-auto">
{pattern.duration}
</div>
</div>
)}
</div>
</div>
</div>
</div>
</>
)
}

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

<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n2">
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n3">
<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">
<div className="row no-gutters">
<h3>Controllers
<div className="row px-xl-1 px-lg-1 px-md-1 px-3">
<div className="col-xl-2 px-xl-1 col-lg-2 px-lg-1 col-md-4 col-10 px-2">
<h3>Controllers</h3>
</div>
<div className="col-xl-2 px-xl-2 col-lg-1 px-lg-5 col-md-2 col-2 px-2">
<button className="btn btn-primary " onClick={this.handleReload} style={{marginLeft:"6px"}}>↻</button>
</h3>
</div>
</div>
</div>
<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">
<div className="navbrightness no-learning-ui row no-gutters pull-right">
<label>
<span role="img" aria-label="light bulb emoji for pixelblaze brightness">💡</span>
<input
id="brightness"
type="range"
className="form-control"
onChange={async (e) => {
await this.changeBrightness(e)
}}
min="0"
max="1"
step=".005"
title={`Brightness ${Math.round(this.state.brightness * 100) }%`}
value={(this.state.brightness !== null) && this.state.brightness}
/>
</label>
</div>
<div className="navbrightness no-learning-ui row no-gutters pull-right">
<label>
<span role="img" aria-label="light bulb emoji for pixelblaze brightness">💡</span>
<input
id="brightness"
type="range"
className="form-control"
onChange={async (e) => {
await this.changeBrightness(e)
}}
min="0"
max="1"
step=".005"
title={`Brightness ${Math.round(this.state.brightness * 100) }%`}
value={(this.state.brightness !== null) && this.state.brightness}
/>
</label>
</div>
</div>
<div className="col-lg-12">
</div>
<div className="row mx-xl-n2 mx-lg-n3 mx-md-n3 mx-n3">
<div className="col-xl-12 px-xl-2 col-lg-12">
<ul className="list-group" id="list">
{this.state.discoveries.map(d => {
const dName = d.name
Expand All @@ -640,31 +646,42 @@ class App extends Component {

{cloneDialog}
{playlistDialog}
<div className="row mx-xl-n4 mx-n4">
<div className="py-1 col-xl-7 px-xl-4 col-3 px-4">
<h3>
Patterns
</h3>
</div>
<div className="py-2 col-xl-5 px-xl-5 col-12 px-4">
<button
className="btn btn-secondary text-left playlist btn-playlist-bulk"
disabled={this.state.deactivateEnableAllButton}
onClick={this.enableAllPatterns}>
Enable All
</button>
<button
className="btn btn-secondary text-left playlist btn-playlist-bulk"
disabled={this.state.deactivateDisableAllButton}
onClick={this.disableAllPatterns}>
Disable All
</button>
<button
className="btn btn-secondary text-left btn-playlist-bulk"
onClick={(e) => this.openPlaylistDialog(e)}>
View Current Playlist
</button>
<div className="row mx-xl-n4 mx-lg-n4 mx-md-n4 mx-n4">
<div className="py-1 col-xl-12 px-xl-4 col-lg-12 px-lg-4 col-md-12 col-12 px-4">
<div className="row px-xl-2 pr-lg-2 px-md-2 px-2">
<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">
<h3>
Patterns
</h3>
</div>
<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">
<button
className="btn btn-secondary text-left playlist btn-playlist-bulk"
disabled={this.state.deactivateEnableAllButton}
onClick={this.enableAllPatterns}>
Enable All
</button>
</div>
<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">
<button
className="btn btn-secondary text-left playlist btn-playlist-bulk"
disabled={this.state.deactivateDisableAllButton}
onClick={this.disableAllPatterns}>
Disable All
</button>
</div>
<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">
<button
className="btn btn-secondary text-left btn-playlist-bulk"
onClick={(e) => this.openPlaylistDialog(e)}>
View Current Playlist
</button>
</div>
</div>
</div>
</div>
<div className="row mx-xl-n4 mx-n4">

</div>
<div className="list-group">
{(this.state.isProcessing) &&
Expand Down

0 comments on commit b69010e

Please sign in to comment.