Update
This commit is contained in:
@@ -6,81 +6,81 @@ Vue.filter('cleanupURL', function (value) {
|
|||||||
Vue.component('RaspberryDisplay', {
|
Vue.component('RaspberryDisplay', {
|
||||||
//language=Vue
|
//language=Vue
|
||||||
template: `
|
template: `
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<tt-loader v-if="loading"></tt-loader>
|
<tt-loader v-if="loading"></tt-loader>
|
||||||
|
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<div style="display: grid; grid-template-columns: auto auto; justify-items: center;">
|
<div style="display: grid; grid-template-columns: auto auto; justify-items: center;">
|
||||||
<h3 style="justify-self: start;">8322 Studenzen NOC Displays</h3>
|
<h3 style="justify-self: start;">8322 Studenzen NOC Displays</h3>
|
||||||
<!-- Add turn on and turn off button here -->
|
<!-- Add turn on and turn off button here -->
|
||||||
<div>
|
<div>
|
||||||
<button class="btn btn-primary" @click="fetchDisplays">Refresh</button>
|
<button class="btn btn-primary" @click="fetchDisplays">Refresh</button>
|
||||||
<button class="btn btn-warning" @click="rebootRaspberry('all')">Reboot</button>
|
<button class="btn btn-warning" @click="rebootRaspberry('all')">Reboot</button>
|
||||||
<button class="btn btn-success" @click="displayPower('on')">Turn on</button>
|
<button class="btn btn-success" @click="displayPower('on')">Turn on</button>
|
||||||
<button class="btn btn-danger" @click="displayPower('off')">Turn off</button>
|
<button class="btn btn-danger" @click="displayPower('off')">Turn off</button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="display-grid">
|
|
||||||
<div v-for="display in displays" :key="display.id"
|
|
||||||
:class="['display', display['display_label'].includes('-B-') ? 'big-42-inch' : 'small-27-inch']"
|
|
||||||
:style="display['custom_style']" style="">
|
|
||||||
<div
|
|
||||||
style="display: grid; grid-template-columns: max-content auto max-content; justify-items: center;width:100%; padding: 0 2px">
|
|
||||||
<div>
|
|
||||||
<!-- FONT AWESOME ONLINE GREEN CIRCLE -->
|
|
||||||
<i class="fas fa-circle" data-toggle="tooltip" title="ONLINE" style="color: green"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div @click.prevent="enableDisplayURLEditMode(display.id)" style="cursor: pointer">
|
|
||||||
<span v-if="displaysURLEditMode !== display.id">{{ display['display_url'] | cleanupURL }}</span>
|
|
||||||
<input v-else-if="displaysURLEditMode === display.id"
|
|
||||||
v-model="display['display_url']"
|
|
||||||
@keyup.enter="disableDisplayURLEditMode(display.id, display['display_url'])"
|
|
||||||
@blur="disableDisplayURLEditMode(display.id, display['display_url'])"
|
|
||||||
ref="displayURLEditInput"
|
|
||||||
class="form-control"
|
|
||||||
type="text">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div style="cursor: pointer">
|
|
||||||
<!-- FONT AWESOME REBOOT ICON -->
|
|
||||||
<i class="fas fa-red fa-sync-alt" data-toggle="tooltip" title="Reboot this Raspberry"
|
|
||||||
@click="rebootRaspberry(display.id)"
|
|
||||||
style="color: green"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<!-- Checkbox for Auto Refresh Enabled -->
|
|
||||||
<div style="display: inline-block" data-toggle="tooltip"
|
|
||||||
:title="\`Auto refresh is \${display['auto_refresh_enabled'] ? 'enabled' : 'disabled'}.\`">
|
|
||||||
<input type="checkbox" :id="'auto_refresh_enabled_checkbox_' + display.id"
|
|
||||||
v-model="display['auto_refresh_enabled']"
|
|
||||||
@change="submitChanges(display.id, 'auto_refresh_enabled', display['auto_refresh_enabled'])">
|
|
||||||
<label :for="'auto_refresh_enabled_checkbox_' + display.id">ARF</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- This will only display if both are true, consider adjusting logic as needed -->
|
|
||||||
<span style="margin: 0 4px"> | </span>
|
|
||||||
|
|
||||||
<!-- Checkbox for Margin Hotfix Enabled -->
|
|
||||||
<div style="display: inline-block" data-toggle="tooltip"
|
|
||||||
:title="\`Margin Hotfix is \${display['margin_hot_fix_enabled'] ? 'enabled' : 'disabled'}.\`">
|
|
||||||
|
|
||||||
<input type="checkbox" :id="'margin_hot_fix_enabled_checkbox_' + display.id"
|
|
||||||
v-model="display['margin_hot_fix_enabled']"
|
|
||||||
@change="submitChanges(display.id, 'margin_hot_fix_enabled', display['margin_hot_fix_enabled'])">
|
|
||||||
<label :for="'margin_hot_fix_enabled_checkbox_' + display.id">MHF</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-text="display['display_label']"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="display-grid">
|
||||||
|
<div v-for="display in displays" :key="display.id"
|
||||||
|
:class="['display', display['display_label'].includes('-B-') ? 'big-42-inch' : 'small-27-inch']"
|
||||||
|
:style="display['custom_style']" style="">
|
||||||
|
<div
|
||||||
|
style="display: grid; grid-template-columns: max-content auto max-content; justify-items: center;width:100%; padding: 0 2px">
|
||||||
|
<div>
|
||||||
|
<!-- FONT AWESOME ONLINE GREEN CIRCLE -->
|
||||||
|
<i class="fas fa-circle" data-toggle="tooltip" title="ONLINE" style="color: green"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div @click.prevent="enableDisplayURLEditMode(display.id)" style="cursor: pointer">
|
||||||
|
<span v-if="displaysURLEditMode !== display.id">{{ display['display_url'] | cleanupURL }}</span>
|
||||||
|
<input v-else-if="displaysURLEditMode === display.id"
|
||||||
|
v-model="display['display_url']"
|
||||||
|
@keyup.enter="disableDisplayURLEditMode(display.id, display['display_url'])"
|
||||||
|
@blur="disableDisplayURLEditMode(display.id, display['display_url'])"
|
||||||
|
ref="displayURLEditInput"
|
||||||
|
class="form-control"
|
||||||
|
type="text">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="cursor: pointer">
|
||||||
|
<!-- FONT AWESOME REBOOT ICON -->
|
||||||
|
<i class="fas fa-red fa-sync-alt" data-toggle="tooltip" title="Reboot this Raspberry"
|
||||||
|
@click="rebootRaspberry(display.id)"
|
||||||
|
style="color: green"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- Checkbox for Auto Refresh Enabled -->
|
||||||
|
<div style="display: inline-block" data-toggle="tooltip"
|
||||||
|
:title="\`Auto refresh is \${display['auto_refresh_enabled'] ? 'enabled' : 'disabled'}.\`">
|
||||||
|
<input type="checkbox" :id="'auto_refresh_enabled_checkbox_' + display.id"
|
||||||
|
v-model="display['auto_refresh_enabled']"
|
||||||
|
@change="submitChanges(display.id, 'auto_refresh_enabled', display['auto_refresh_enabled'])">
|
||||||
|
<label :for="'auto_refresh_enabled_checkbox_' + display.id">ARF</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- This will only display if both are true, consider adjusting logic as needed -->
|
||||||
|
<span style="margin: 0 4px"> | </span>
|
||||||
|
|
||||||
|
<!-- Checkbox for Margin Hotfix Enabled -->
|
||||||
|
<div style="display: inline-block" data-toggle="tooltip"
|
||||||
|
:title="\`Margin Hotfix is \${display['margin_hot_fix_enabled'] ? 'enabled' : 'disabled'}.\`">
|
||||||
|
|
||||||
|
<input type="checkbox" :id="'margin_hot_fix_enabled_checkbox_' + display.id"
|
||||||
|
v-model="display['margin_hot_fix_enabled']"
|
||||||
|
@change="submitChanges(display.id, 'margin_hot_fix_enabled', display['margin_hot_fix_enabled'])">
|
||||||
|
<label :for="'margin_hot_fix_enabled_checkbox_' + display.id">MHF</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-text="display['display_label']"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -130,9 +130,7 @@ Vue.component('RaspberryDisplay', {
|
|||||||
});
|
});
|
||||||
}, disableDisplayURLEditMode(displayID, displayURL) {
|
}, disableDisplayURLEditMode(displayID, displayURL) {
|
||||||
this.displaysURLEditMode = null;
|
this.displaysURLEditMode = null;
|
||||||
if (this.displays.find(d => d.id === displayID).display_url !== displayURL) {
|
this.submitChanges(displayID, 'display_url', displayURL);
|
||||||
this.submitChanges(displayID, 'display_url', displayURL);
|
|
||||||
}
|
|
||||||
}, async submitChanges(displayID, field, value) {
|
}, async submitChanges(displayID, field, value) {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=change`, {
|
await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=change`, {
|
||||||
|
|||||||
Reference in New Issue
Block a user