Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin Settings layout #999

Merged
merged 1 commit into from
Jan 6, 2025
Merged

Admin Settings layout #999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* Webapp
* Update Airplay icon to modern variant
* Add gradient to background to break up the solid color
* Reformat Admin Settings portion of Admin Panel (previously known as the Updater)

## 0.4.5
* Web App
Expand Down
49 changes: 28 additions & 21 deletions amplipi/updater/static/css/styles.css
View file
Open in desktop
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,40 @@ hr {
}


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

/* lifted from https://www.w3schools.com/css/css_tooltip.asp */
.indent {
padding-left: 35px;
}

.hover-label {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
@media (min-width: 768px) {
.pseudo-column {
width: 250px;
margin-right: 55%;
float: right;
}
}

.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;
.wide-button{
width: 100%;
}

position: absolute;
z-index: 1;
/*
The following classes have a :hover counterpart to counter the buttons they're used
on having a default :hover that sets them back to the default blue when not overridden
*/
.error{
background-color: #DD0000;
}
.error:hover{
background-color: #DD0000;
}

.hover-label:hover .hover-tooltip{
visibility: visible;
.success{
background-color: #00AA00;
}
.success:hover{
background-color: #00AA00;
}
67 changes: 32 additions & 35 deletions amplipi/updater/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ <h1><span class="text-white">Ampli</span><span class="text-danger">Pi</span></h1
<div class="tab-pane fade text-left column-container" id="admin-settings" role="tabpanel" aria-labelledby="admin-settings-tab">
<script>
function setVisibility(visible, ...others){
// Sets visibility of the first element to inline, the rest to none
visible.style.display = 'inline';
// Sets visibility of the first element to block, the rest to none
visible.style.display = 'block';
for(i=0; i < others.length; i++){
others[i].style.display = 'none';
}
Expand Down Expand Up @@ -199,49 +199,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 to set a password that will be required to access the webapp. Setting a password will log out any active user sessions and will require using the new password to access the app, and setting a blank password will remove all password protections.
<br />
Note that this is not the system password found on the screen on the front of your unit.
</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>
<div class="pseudo-column">
<a id="password-submit" role="button" class="btn btn-primary btn-sm text-center wide-button" onClick="set_password();">Update Password</a>
<a id="password-success" role="button" class="btn btn-primary btn-sm text-center wide-button success" style="display: none;">Success!</a>
<a id="password-fail" role="button" class="btn btn-primary btn-sm text-center wide-button error" style="display: none;">Failure...</a>
<a id="password-no-match" role="button" class="btn btn-primary btn-sm text-center wide-button error" style="display: none;">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>
</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 may 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 @@ -250,20 +250,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>
<div class="pseudo-column">
<a id="persist-submit" role="button" class="btn btn-primary btn-sm text-center wide-button" onClick="setPersist()">Save Persistence & Delay</a>
<a id="persist-success" role="button" class="btn btn-primary btn-sm text-center wide-button success" style="display: none;">Success!</a>
<a id="persist-fail" role="button" class="btn btn-primary btn-sm text-center wide-button error" style="display: none;">Failure...</a>
<div id="persist-spinner" style="display: none;">
<i class="fa fa-circle-o-notch fa-spin" 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
Loading