Skip to content

Commit

Permalink
Add info cards, style overrides to admin settings tab of updater
Browse files Browse the repository at this point in the history
  • Loading branch information
@SteveMicroNova
SteveMicroNova committed Dec 6, 2024
1 parent 43f883d commit 001abbf
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 58 deletions.
35 changes: 10 additions & 25 deletions amplipi/updater/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
}

.column-item {
float: left; /* Used to prevent elements from above hanging over the top of the next section */
display: flex;
flex-direction: column;
justify-content: space-around;
Expand Down Expand Up @@ -118,34 +119,18 @@ hr {
}


.set-password-dialog {
.description-color {
color: #aaaaaa !important;
}

/* lifted from https://www.w3schools.com/css/css_tooltip.asp */

.hover-label {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
.indent {
padding-left: 35px;
}

.hover-label .hover-tooltip{
top: 100%;
left: 50%;
visibility: hidden;
width: 750px;
max-width: 70vw;
background-color: rgba(100, 100, 100, 1);
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

position: absolute;
z-index: 1;
}

.hover-label:hover .hover-tooltip{
visibility: visible;
@media (min-width: 768px) {
.pseudo-column {
width: 250px;
margin-right: 55%;
float: right;
}
}
63 changes: 30 additions & 33 deletions amplipi/updater/static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,49 +198,49 @@ <h1><span class="text-white">Ampli</span><span class="text-danger">Pi</span></h1
</div>

<!-- Password -->
<div id="set-password column-item">
<h6 class="hover-label">
Set Password
<span class="hover-tooltip">
This form lets you set a web interface password, which will make it so that you must input the same password to access the system's controls. Leaving the fields empty will remove password protection. Note that this only affects the web interface, not the system password, and will log out any active sessions.
</span>
<div style="background-color: inherit; box-shadow: none; width: 100%;" class="card set-password column-item">
<h6 class="card-header">
Set Password:
</h6>
<div class="set-password form-group">
<div class="set-password form-group indent">
<div class="description-color">
Set Password allows you set to a web interface password, which will make it so that you must input the same password to access the app
<br />
Leaving the fields empty will remove password protection
</div>
<div>
<label for="password">
Password:
</label>
<input id="password" type="password">
<input id="password" type="password" class="pseudo-column">
</div>
<div>
<label for="confirm-password" >Confirm Password:</label>
<input id="confirm-password" type="password">
<input id="confirm-password" type="password" class="pseudo-column">
</div>
<div>
<a id="password-submit" role="button" class="btn btn-primary btn-sm text-center" onClick="set_password();">Update Password</a>
<a id="password-success" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #00AA00;">Success!</a>
<a id="password-fail" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #DD0000;">Failure...</a>
<a id="password-no-match" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #DD0000;">Passwords do not match!</a>
<a id="password-submit" role="button" class="btn btn-primary btn-sm text-center pseudo-column" onClick="set_password();">Update Password</a>
<a id="password-success" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #00AA00;">Success!</a>
<a id="password-fail" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #DD0000;">Failure...</a>
<a id="password-no-match" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #DD0000;">Passwords do not match!</a>
<div id="password-spinner" style="display: none;">
<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
<i class="fa fa-circle-o-notch fa-spin pseudo-column" style="font-size:24px"></i>
</div>
</div>
<div>
</div>
</div>
</div>

<!-- Log Persistence -->
<div id="log-persistence column-item">
<h6 class="hover-label">
Persist Logs
<span class="hover-tooltip">
By default, logs are stored in memory to preserve the limited read/write cycles of the system's EMMC flash storage; this has the effect of deleting all logs on system reboot
<br>
By enabling log persistence, you can save logs to storage instead to persist them between reboots. Over time this may wear out your device; to avoid this, there is also an "auto off delay" that will turn off persistance after X days. Input 0 to not automatically disable log persistance (this is not recommended)
</span>
<div style="background-color: inherit; box-shadow: none; width: 100%;" class="card log-persistence column-item">
<h6 class="card-header">
Persist Logs:
</h6>
<div class="log-persistence form-group">
<div class="log-persistence form-group indent">
<div class="description-color">
Persist Logs saves logs to system storage instead of deleting them on reboot
<br/>
To prevent wear on the eMMC flash storage, you can set an "auto-off delay" to disable persistence after X days (enter 0 to keep it on indefinitely, at risk of shortening system lifespan).
</div>
<div>
<input id="persist-checkbox" type="checkbox"/>
<label for="persist-checkbox">Enable</label>
Expand All @@ -249,20 +249,17 @@ <h6 class="hover-label">
<label for="persist-input">
Auto Off Delay:
</label>
<input id="persist-input" />
<input id="persist-input" class="pseudo-column"/>
</div>
<div>
<a id="persist-submit" role="button" class="btn btn-primary btn-sm text-center" onClick="setPersist()">Save Persistence & Delay</a>
<a id="persist-success" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #00AA00;">Success!</a>
<a id="persist-fail" role="button" class="btn btn-primary btn-sm text-center" style="display: none; background-color: #DD0000;">Failure...</a>
<a id="persist-submit" role="button" class="btn btn-primary btn-sm text-center pseudo-column" onClick="setPersist()">Save Persistence & Delay</a>
<a id="persist-success" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #00AA00;">Success!</a>
<a id="persist-fail" role="button" class="btn btn-primary btn-sm text-center pseudo-column" style="display: none; background-color: #DD0000;">Failure...</a>
<div id="persist-spinner" style="display: none;">
<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
<i class="fa fa-circle-o-notch fa-spin pseudo-column" style="font-size:24px"></i>
</div>
</div>
</div>
<div class="set-password-dialog">
WARNING: Leaving log persistence on for extended periods can damage your system.
</div>
</div> <!-- log-persistence -->

</div>
Expand Down

0 comments on commit 001abbf

Please sign in to comment.