Merge branch 'bugfix/rpi-display-edit-url' into 'master'
Update See merge request fronk/thetool!389
This commit is contained in:
Luca Haid
@@ -6,81 +6,81 @@ Vue.filter('cleanupURL', function (value) {
|
||||
Vue.component('RaspberryDisplay', {
|
||||
//language=Vue
|
||||
template: `
|
||||
<div class="card">
|
||||
<tt-loader v-if="loading"></tt-loader>
|
||||
<div class="card">
|
||||
<tt-loader v-if="loading"></tt-loader>
|
||||
|
||||
<div class="p-2">
|
||||
<div style="display: grid; grid-template-columns: auto auto; justify-items: center;">
|
||||
<div class="p-2">
|
||||
<div style="display: grid; grid-template-columns: auto auto; justify-items: center;">
|
||||
<h3 style="justify-self: start;">8322 Studenzen NOC Displays</h3>
|
||||
<!-- Add turn on and turn off button here -->
|
||||
<div>
|
||||
<button class="btn btn-primary" @click="fetchDisplays">Refresh</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-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>
|
||||
<!-- Add turn on and turn off button here -->
|
||||
<div>
|
||||
<button class="btn btn-primary" @click="fetchDisplays">Refresh</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-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>
|
||||
`,
|
||||
|
||||
@@ -130,9 +130,7 @@ Vue.component('RaspberryDisplay', {
|
||||
});
|
||||
}, disableDisplayURLEditMode(displayID, displayURL) {
|
||||
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) {
|
||||
this.loading = true;
|
||||
await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=change`, {
|
||||
|
||||
Reference in New Issue
Block a user