Luca Haid
742a2c1495
- added axios library to plugins - added vue library to plugins - added tt-frontend-framework for vue with basic documentation - added git_merge_ts to additionalCSS - added git_merge_ts to additionalJS - added property JSGlobals - refactored RaspberryDisplay Module
99 lines
5.0 KiB
PHP
99 lines
5.0 KiB
PHP
<?php /** @noinspection PhpUndefinedClassInspection
|
|
* @var string $mfLayoutPackage
|
|
* @var TYPE_NAME $git_merge_ts
|
|
*/
|
|
|
|
//additional css /css/views/RaspberryDisplay.css
|
|
|
|
$JSGlobals = ["BASE_URL" => self::getUrl("RaspberryDisplay"),
|
|
"DASHBOARD_URL" => self::getUrl("Dashboard"),
|
|
"MFAPPNAME" => MFAPPNAME_SLUG,
|
|
"PAGE_TITLE" => "Raspberry Displays",
|
|
"PATH" => [
|
|
["text" => MFAPPNAME_SLUG, "href" => self::getUrl("Dashboard")],
|
|
["text" => "Raspberry Displays", "href" => self::getUrl("RaspberryDisplay")]
|
|
]
|
|
];
|
|
|
|
$additionalJS = ["plugins/vue/vue.min.js",
|
|
"plugins/axios/axios.min.js",
|
|
"plugins/vue/tt-components/tt-page-title.js",
|
|
"plugins/vue/tt-components/tt-loader.js"];
|
|
$additionalCSS = ["css/views/RaspberryDisplay.css", "plugins/vue/tt-components/css/tt-loader.css"];
|
|
|
|
include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
|
|
|
|
<div id="app">
|
|
<!-- start page title -->
|
|
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
|
|
|
|
<div class="card">
|
|
<tt-loader v-if="loading"></tt-loader>
|
|
|
|
<div class="p-2">
|
|
<h3>8322 Studenzen NOC Displays</h3>
|
|
|
|
<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>
|
|
|
|
|
|
<script src="/js/pages/raspberryDisplay.js?<?=$git_merge_ts?>"></script>
|