Skip to content

Commit

Permalink
Added day and night theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@ieb
ieb committed May 18, 2024
1 parent 628843d commit 4bf29b6
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 48 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ ToDo
* [x] Implement Admin Login without relying on Browser, as BasicAuth popups in ServciceWorkers dont work offlin. On fixing found out: Explicitly setting headers works, but service workers use preflight on GET urls and are stricter about the cors headers than a direct fetch from a window context. Username and password are now stored in sessionStorage and logout works.
* [x] Urls not easy to use to nav (Workaround, open in browser, change url, open in app)
* [x] Add ability to set the server url for data
* [ ] Add day night themes.
* [ ] Persist history in local storage
* [ ] Verify target VMG down wind.
* [ ] Port eink displays
Expand Down
3 changes: 2 additions & 1 deletion ui/v2/src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ class App extends Component {
layout: props.layout,
layoutList: [],
menuKey: Date.now(),
appKey: Date.now(),
};
this.setView = this.setView.bind(this);
this.setApiUrl = this.setApiUrl.bind(this);
Expand Down Expand Up @@ -71,6 +72,7 @@ class App extends Component {
return false;
}


setView(view, layout) {
if (layout) {
this.setState({
Expand Down Expand Up @@ -128,7 +130,6 @@ class App extends Component {

render() {
const view = this.renderView();
console.log("Connection state ",this.state.apiChangeMessage);
return html`<div>
<${Menu}
key=${this.state.menuKey}
Expand Down
116 changes: 85 additions & 31 deletions ui/v2/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,20 @@ body {
font-family: Arial, sans-serif;
background: #333;
color: white;
--main-foreground-color: white;
--menu-forground: lightgrey;
}

.day {
--main-foreground-color: white;
--menu-forground: lightgrey;
}


.night {
--main-foreground-color: red;
--menu-forground: red;
}

.nmeaLayout {
display: flex;
Expand All @@ -17,8 +29,23 @@ body {
display: flex;
/*justify-content: space-around; */
align-items: center;
color: var(--main-foreground-color);
}

.navbar input {
padding: 0px 6px;
margin: 0px 9px;
width: 177px;
color: var(--main-foreground-color);
border: none;
outline: none;
background: #444;
height: 29px;
border-radius: 5px;
}



.nav-item {
position: relative;
}
Expand All @@ -30,7 +57,7 @@ body {
.dropdown-content {
display: none;
position: absolute;
color: lightgray;
color: var(--menu-forground);
background: #444;
/*min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
Expand All @@ -46,7 +73,7 @@ body {
}

.nav-item a {
color: lightgray;
color: var(--menu-forground);;
padding: 12px 16px;
text-decoration: none;
display: block;
Expand All @@ -56,16 +83,13 @@ body {
border-radius: 5px;
}



.dropdown-content a {
border: none;
text-wrap: nowrap;
}
.dropdown-content a:hover {
/* text-decoration: underline; */
/* border: 1px solid white;
border-radius: 5px; */

/* background-color: #f1f1f1; */
}


Expand All @@ -74,25 +98,27 @@ body {
}
.topmenu a {
text-decoration: none;
color: white;
color: var(--main-foreground-color);
padding: 1px;
margin-right: 10px;
border: 1px solid grey;
border-radius: 5px;
}
.topmenu a:hover {
text-decoration: underline;
border: 1px solid white;
border: 1px solid var(--main-foreground-color);
border-radius: 5px;
}
.topmenu a:click {
text-decoration: underline;
background-color: lightgray;
border: 1px solid white;
background-color: var(--menu-forground);;
border: 1px solid var(--main-foreground-color);
border-radius: 5px;
}




/* menu --------------------------*/
.menu {
position: absolute;
Expand Down Expand Up @@ -169,12 +195,14 @@ body {
/* instuments --------------------------*/

.textbox {
position: relative;
display: inline-block;
width: 10rem;
height: 6rem;
border: 1px solid;
border-radius: 10px;
position: relative;
display: inline-block;
width: 10rem;
height: 6rem;
border: 1px solid;
border-radius: 10px;
stroke: var(--main-foreground-color);
color: var(--main-foreground-color);
}

.size-maximum {
Expand All @@ -199,12 +227,12 @@ body {
}

.textbox svg .path {
stroke: white;
stroke: var(--main-foreground-color);
stroke-width: 1px;
}

.textbox svg .meanline {
stroke: white;
stroke: var(--main-foreground-color);
stroke-width: 1px;
opacity: 50%;
}
Expand All @@ -221,7 +249,7 @@ body {
}

.textbox svg .small {
stroke: white;
stroke: var(--main-foreground-color);
font-size: 0.7rem;
font-weight: lighter;
stroke-width: 1px;
Expand Down Expand Up @@ -311,7 +339,7 @@ body {
display: contents;
}
.nmea2000Messages > div {
border: solid 1px white;
border: solid 1px var(--main-foreground-color);
border-radius: 5px;
}

Expand Down Expand Up @@ -339,7 +367,7 @@ button {
cursor: pointer;
margin-left: 20px;
background: #0000;
color: #fff;
color: var(--main-foreground-color);
border: 0px;
}

Expand All @@ -348,7 +376,7 @@ button {
background-color: #D14836;
background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
border: 1px solid transparent;
color: white;
color: var(--main-foreground-color);
border-radius: 2px;
}

Expand All @@ -368,15 +396,21 @@ button {
}

.storeviewer {
width: 100%;
height: calc(100vh - 110px);
width: 100%;
height: calc(100vh - 110px);
color: var(--main-foreground-color);
}
.frameviewer {
color: var(--main-foreground-color);
}

/* log viewer, with hits from Mistal 7B in Brave Chat... because css is so painful to get right */
.logviewer {
width: 100%;
height: calc(100vh - 110px);
counter-reset: line; /* Reset the line number at the start of the .logview container */
color: var(--main-foreground-color);

}

.logviewer .line {
Expand Down Expand Up @@ -442,6 +476,10 @@ button {
text-wrap: nowrap;
}

.adminview {
color: var(--main-foreground-color);
}

.adminview button ,
.adminview input[type="file"],
.adminview input[type="text"] {
Expand All @@ -457,7 +495,22 @@ button {
border-style: solid;
min-width: 2rem;
background-color: #42310d;
color: white;
color: var(--main-foreground-color);
}

.adminview input[type="file"]::file-selector-button {
color: var(--main-foreground-color);
background-color: #42310d;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 5px;


}

.adminview input[type="file"] button {
color: var(--main-foreground-color);
}

.adminview button:hover {
Expand All @@ -482,7 +535,7 @@ button {

.fileInfo a {
text-decoration: none;
color: white;
color: var(--main-foreground-color);
}
.fileInfo a:hover {
text-decoration: underline;
Expand All @@ -499,11 +552,12 @@ button {


.logviewer .enabled {
border: solid 0.5px white;
border: solid 0.5px var(--main-foreground-color);
}


.login-box {
color: var(--main-foreground-color);
background-color: #222;
padding: 20px;
width: 300px;
Expand All @@ -519,7 +573,7 @@ button {
padding: 4px 7px;
margin-bottom: 2px;
width: 177px;
color: white;
color: var(--main-foreground-color);
border: none;
outline: none;
background: #444;
Expand Down Expand Up @@ -548,7 +602,7 @@ button {
}

.user-box button:hover {
color: #fff;
color: var(--main-foreground-color);
}

.password-toggle-icon {
Expand All @@ -564,7 +618,7 @@ button {
}

.password-toggle-icon i:hover {
color: #fff;
color: var(--main-foreground-color);
}


Expand Down
14 changes: 1 addition & 13 deletions ui/v2/src/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@ class NMEALayout extends Component {
options: [],
dataIndicatorOn: false,
layout: undefined,
nmea0183Address: 'no server',
connectedClients: 0,
packetsRecieved: 0,

};
Expand All @@ -72,13 +70,9 @@ class NMEALayout extends Component {
async componentDidMount() {
this.updateInterval = setInterval((async () => {
const packetsRecieved = this.storeAPI.getPacketsRecieved();
const nmea0183Address = this.storeAPI.getNmea0183Address();
const connectedClients = this.storeAPI.getConnectedClients();
if (this.state.packetsRecieved !== packetsRecieved
|| this.state.nmea0183Address !== nmea0183Address
|| this.state.connectedClients !== connectedClients
) {
this.setState({ packetsRecieved, nmea0183Address, connectedClients });
this.setState({ packetsRecieved });
}
}), 1000);
}
Expand Down Expand Up @@ -307,12 +301,6 @@ class NMEALayout extends Component {
<${EditUIControl} onEdit=${this.onEditLayout}
onSave=${this.onSave}
onAddItem=${this.onAddItem}/>
<div className="debugControls">
address: ${this.state.nmea0183Address}
</div>
<div className="debugControls">
connected: ${this.state.connectedClients}
</div>
<div className="debugControls">
packetsRecieved: ${this.state.packetsRecieved}
</div>
Expand Down
14 changes: 12 additions & 2 deletions ui/v2/src/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,17 @@ class Menu extends Component {

// eslint-disable-next-line class-methods-use-this
async onClickMenu(event) {
const { view, layout } = event.target.attributes;
const { view, layout, theme } = event.target.attributes;
if (view) {
if (layout) {
this.setView(view.value, layout.value);
} else {
this.setView(view.value);
}
}
if (theme) {
document.getElementById('root').className = theme.value;
}
event.preventDefault();
return false;
}
Expand Down Expand Up @@ -73,7 +76,14 @@ class Menu extends Component {
<div class="nav-item"><a href="#" view="frames" onClick=${this.onClickMenu} >Frames</a></div>
<div class="nav-item"><a href="#" view="admin" onClick=${this.onClickMenu} >Admin</a></div>
<div class="nav-item">
Host: <input type="text" name="apiurl" value=${this.state.apiUrl} onChange=${this.apiChange} />
<a href="#" view="admin" onClick=${this.onClickMenu} >Theme</a>
<div class="dropdown-content">
<a key="day" theme="day" href="#" onClick=${this.onClickMenu} >day</a>
<a key="night" theme="night" href="#" onClick=${this.onClickMenu} >night</a>
</div>
</div>
<div class="nav-item">
<input type="text" name="apiurl" value=${this.state.apiUrl} onChange=${this.apiChange} />
${this.state.apiChangeMessage}
</div>
</div>`;
Expand Down
Loading

0 comments on commit 4bf29b6

Please sign in to comment.