- fixed RaspberryDisplay definition
- 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
This commit is contained in:
@@ -1,273 +1,99 @@
|
|||||||
<?php /** @noinspection PhpUndefinedClassInspection
|
<?php /** @noinspection PhpUndefinedClassInspection
|
||||||
* @var string $mfLayoutPackage
|
* @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"); ?>
|
include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
|
||||||
|
|
||||||
<!-- start page title -->
|
<div id="app">
|
||||||
<div class="row">
|
<!-- start page title -->
|
||||||
<div class="col-12">
|
<tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
|
||||||
<div class="page-title-box">
|
|
||||||
<div class="page-title-right">
|
|
||||||
<ol class="breadcrumb m-0">
|
|
||||||
<li class="breadcrumb-item"><a href="<?= self::getUrl("Dashboard") ?>"><?= MFAPPNAME_SLUG ?></a>
|
|
||||||
</li>
|
|
||||||
<li class="breadcrumb-item"><a href="<?= self::getUrl("Order") ?>">Raspberry Displays</a></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
<h4 class="page-title">Raspberry Displays</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- end page title -->
|
|
||||||
|
|
||||||
<!-- TODO: export style to css -->
|
<div class="card">
|
||||||
<style>
|
<tt-loader v-if="loading"></tt-loader>
|
||||||
[v-cloak] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-grid {
|
<div class="p-2">
|
||||||
display: grid;
|
<h3>8322 Studenzen NOC Displays</h3>
|
||||||
grid-template-columns: repeat(8, 11.25vw);
|
|
||||||
grid-row-gap: 20px;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display {
|
<div class="display-grid">
|
||||||
background-color: #f8f9fa;
|
<div v-for="display in displays" :key="display.id"
|
||||||
border: 2px solid #dee2e6;
|
:class="['display', display['display_label'].includes('-B-') ? 'big-42-inch' : 'small-27-inch']"
|
||||||
border-radius: 4px;
|
:style="display['custom_style']" style="">
|
||||||
overflow: hidden;
|
<div style="display: grid; grid-template-columns: max-content auto max-content; justify-items: center;width:100%; padding: 0 2px">
|
||||||
font-size: clamp(0.6rem, 0.8rem, 1.1rem);
|
<div>
|
||||||
display: grid;
|
<!-- FONT AWESOME ONLINE GREEN CIRCLE -->
|
||||||
grid-template-rows: repeat(3, 1fr);
|
<i class="fas fa-circle" data-toggle="tooltip" title="ONLINE" style="color: green"></i>
|
||||||
justify-items: center;
|
</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>
|
||||||
|
|
||||||
.display > *:nth-child(1) {
|
</div>
|
||||||
align-self: start;
|
<div style="cursor: pointer">
|
||||||
}
|
<!-- FONT AWESOME REBOOT ICON -->
|
||||||
|
<i class="fas fa-red fa-sync-alt" data-toggle="tooltip" title="Reboot this Raspberry"
|
||||||
.display > *:nth-child(2) {
|
@click="rebootRaspberry(display.id)"
|
||||||
align-self: center;
|
style="color: green"></i>
|
||||||
}
|
</div>
|
||||||
|
|
||||||
.display > *:nth-child(3) {
|
|
||||||
align-self: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-27-inch {
|
|
||||||
grid-column: span 1;
|
|
||||||
margin: 0 0.37vw;
|
|
||||||
width: calc(10.5vw);
|
|
||||||
height: calc(10.5vw * 9 / 16)
|
|
||||||
}
|
|
||||||
|
|
||||||
.big-42-inch {
|
|
||||||
grid-column: span 2;
|
|
||||||
margin: 0 0.37vw;
|
|
||||||
width: calc(21vw);
|
|
||||||
height: calc(21vw * 9 / 16)
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(10, 10, 10, 0.5); /* Semi-transparent black */
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center; /* Center the spinner vertically and horizontally */
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
opacity: 0.5;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Define the transition */
|
|
||||||
.fade-enter-active, .fade-leave-active {
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */
|
|
||||||
{
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue-select@3.20.2/dist/vue-select.min.js"></script>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/vue-select@3.20.2/dist/vue-select.min.css" rel="stylesheet">
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
||||||
|
|
||||||
<div id="app" class="card">
|
|
||||||
<transition name="fade">
|
|
||||||
<div v-if="loading" class="w-100 h-100" style="position: absolute">
|
|
||||||
<div class="overlay" id="loading">
|
|
||||||
<div class="d-flex justify-content-center">
|
|
||||||
<div class="spinner-border" role="status">
|
|
||||||
<span class="sr-only">Loading...</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<div class="p-2">
|
|
||||||
<h3>8322 Studenzen NOC Displays</h3>
|
|
||||||
<div class="display-grid">
|
|
||||||
|
|
||||||
|
|
||||||
<div v-for="display in displays2" :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>
|
<div>
|
||||||
<!-- FONT AWESOME ONLINE GREEN CIRCLE -->
|
<!-- Checkbox for Auto Refresh Enabled -->
|
||||||
<i class="fas fa-circle" data-toggle="tooltip" title="ONLINE" style="color: green"></i>
|
<div style="display: inline-block" data-toggle="tooltip"
|
||||||
</div>
|
:title="`Auto refresh is ${display['auto_refresh_enabled'] ? 'enabled' : 'disabled'}.`">
|
||||||
<div>
|
<input type="checkbox" :id="'auto_refresh_enabled_checkbox_' + display.id"
|
||||||
<div @click.prevent="enableDisplayURLEditMode(display.id)" style="cursor: pointer">
|
v-model="display['auto_refresh_enabled']"
|
||||||
<span v-if="displaysURLEditMode !== display.id">{{ display.display_url | cleanupURL }}</span>
|
@change="submitChanges(display.id, 'auto_refresh_enabled', display['auto_refresh_enabled'])">
|
||||||
<input v-else-if="displaysURLEditMode === display.id"
|
<label :for="'auto_refresh_enabled_checkbox_' + display.id">ARF</label>
|
||||||
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>
|
<!-- This will only display if both are true, consider adjusting logic as needed -->
|
||||||
<div style="cursor: pointer">
|
<span style="margin: 0 4px"> | </span>
|
||||||
<!-- 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 Margin Hotfix Enabled -->
|
||||||
<!-- Checkbox for Auto Refresh Enabled -->
|
<div style="display: inline-block" data-toggle="tooltip"
|
||||||
<div style="display: inline-block" data-toggle="tooltip"
|
:title="`Margin Hotfix is ${display['margin_hot_fix_enabled'] ? 'enabled' : 'disabled'}.`">
|
||||||
:title="`Auto refresh is ${display.auto_refresh_enabled ? 'enabled' : 'disabled'}.`">
|
|
||||||
<input type="checkbox" :id="'auto_refresh_enabled_checkbox_' + display.id"
|
<input type="checkbox" :id="'margin_hot_fix_enabled_checkbox_' + display.id"
|
||||||
v-model="display.auto_refresh_enabled"
|
v-model="display['margin_hot_fix_enabled']"
|
||||||
@change="submitChanges(display.id, 'auto_refresh_enabled', display.auto_refresh_enabled)">
|
@change="submitChanges(display.id, 'margin_hot_fix_enabled', display['margin_hot_fix_enabled'])">
|
||||||
<label :for="'auto_refresh_enabled_checkbox_' + display.id">ARF</label>
|
<label :for="'margin_hot_fix_enabled_checkbox_' + display.id">MHF</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- This will only display if both are true, consider adjusting logic as needed -->
|
<div v-text="display['display_label']"></div>
|
||||||
<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>
|
|
||||||
{{ display.display_label }}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
|
||||||
Vue.filter('cleanupURL', function (value) {
|
|
||||||
value = value.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
|
|
||||||
return value;
|
|
||||||
})
|
|
||||||
|
|
||||||
new Vue({
|
<script src="/js/pages/raspberryDisplay.js?<?=$git_merge_ts?>"></script>
|
||||||
el: '#app',
|
|
||||||
mounted() {
|
|
||||||
this.fetchDisplays();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async rebootRaspberry(displayID) {
|
|
||||||
this.loading = true;
|
|
||||||
await axios.get('/RaspberryDisplay/api?do=reboot', {
|
|
||||||
params: {
|
|
||||||
displayID: displayID
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.loading = false;
|
|
||||||
},
|
|
||||||
async fetchDisplays() {
|
|
||||||
this.loading = true;
|
|
||||||
const response = await axios.get('/RaspberryDisplay/api?do=getDisplays');
|
|
||||||
this.displays2 = response.data.result;
|
|
||||||
this.loading = false;
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
$('[data-toggle="tooltip"]').tooltip('dispose');
|
|
||||||
$('[data-toggle="tooltip"]').tooltip();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
enableDisplayURLEditMode(displayID) {
|
|
||||||
this.displaysURLEditMode = displayID;
|
|
||||||
const _this = this;
|
|
||||||
// wait for the DOM to update
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
_this.$refs['displayURLEditInput'][0].focus();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
disableDisplayURLEditMode(displayID, displayURL) {
|
|
||||||
this.displaysURLEditMode = null;
|
|
||||||
this.submitChanges(displayID, 'display_url', displayURL);
|
|
||||||
},
|
|
||||||
async submitChanges(displayID, field, value) {
|
|
||||||
this.loading = true;
|
|
||||||
await axios.get('/RaspberryDisplay/api?do=change', {
|
|
||||||
params: {
|
|
||||||
displayID: displayID,
|
|
||||||
field: field,
|
|
||||||
value: value,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
await this.fetchDisplays();
|
|
||||||
this.loading = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
loading: false,
|
|
||||||
displaysURLEditMode: null,
|
|
||||||
displays2: null,
|
|
||||||
displays: [
|
|
||||||
{id: 1, size: 'small-27-inch', label: 'NOC-DP-S-1'},
|
|
||||||
{id: 2, size: 'small-27-inch', label: 'NOC-DP-S-2'},
|
|
||||||
{id: 3, size: 'big-42-inch', label: 'NOC-DP-B-3'},
|
|
||||||
{id: 4, size: 'big-42-inch', label: 'NOC-DP-B-4'},
|
|
||||||
{id: 5, size: 'small-27-inch', label: 'NOC-DP-S-5'},
|
|
||||||
{id: 6, size: 'small-27-inch', label: 'NOC-DP-S-6'},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
size: 'small-27-inch',
|
|
||||||
label: 'NOC-DP-S-7',
|
|
||||||
customStyle: 'grid-column: 3 / span 2; justify-self: center;'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
size: 'small-27-inch',
|
|
||||||
label: 'NOC-DP-S-8',
|
|
||||||
customStyle: 'grid-column: 5 / span 2; justify-self: center;'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
<?php if(isset($additionalCSS) && is_array($additionalCSS) && count($additionalCSS)): ?>
|
<?php if(isset($additionalCSS) && is_array($additionalCSS) && count($additionalCSS)): ?>
|
||||||
<?php foreach($additionalCSS as $css): ?>
|
<?php foreach($additionalCSS as $css): ?>
|
||||||
<link rel="stylesheet" href="<?=self::getResourcePath()?><?=$css?>" />
|
<link rel="stylesheet" href="<?=self::getResourcePath()?><?=$css?>?<?=$git_merge_ts?>" />
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
@@ -39,10 +39,19 @@
|
|||||||
<script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/bootstrap-select.min.js"></script>
|
<script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/bootstrap-select.min.js"></script>
|
||||||
<script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap-autocomplete.min.js"></script>
|
<script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap-autocomplete.min.js"></script>
|
||||||
<script type="text/javascript" src="<?=self::getResourcePath()?>datatables/datatables.min.js?<?=$git_merge_ts?>"></script>
|
<script type="text/javascript" src="<?=self::getResourcePath()?>datatables/datatables.min.js?<?=$git_merge_ts?>"></script>
|
||||||
|
|
||||||
|
<?php if(isset($JSGlobals) && is_array($JSGlobals) && count($JSGlobals)): ?>
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.TT_CONFIG = {};
|
||||||
|
<?php foreach($JSGlobals as $key => $value): ?>
|
||||||
|
window.TT_CONFIG.<?=$key?> = <?=is_array($value) ? json_encode($value) : "'$value'"; ?>;
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</script>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if(isset($additionalJS) && is_array($additionalJS) && count($additionalJS)): ?>
|
<?php if(isset($additionalJS) && is_array($additionalJS) && count($additionalJS)): ?>
|
||||||
<?php foreach($additionalJS as $js): ?>
|
<?php foreach($additionalJS as $js): ?>
|
||||||
<script src="<?=self::getResourcePath()?><?=$js?>"></script>
|
<script src="<?=self::getResourcePath()?><?=$js?>?<?=$git_merge_ts?>"></script>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
|
|||||||
@@ -4,9 +4,9 @@ use phpseclib3\Net\SSH2;
|
|||||||
|
|
||||||
class RaspberryDisplayController extends mfBaseController
|
class RaspberryDisplayController extends mfBaseController
|
||||||
{
|
{
|
||||||
private $port = 22;
|
private int $port = 22;
|
||||||
private $username = XINON_RASPBERRY_DISPLAY_SSH_USER;
|
private string $username = XINON_RASPBERRY_DISPLAY_SSH_USER;
|
||||||
private $password = XINON_RASPBERRY_DISPLAY_SSH_PASS;
|
private string $password = XINON_RASPBERRY_DISPLAY_SSH_PASS;
|
||||||
|
|
||||||
protected function init(): void
|
protected function init(): void
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -16,10 +16,11 @@ final class AddRaspberryDisplayTable extends AbstractMigration
|
|||||||
->addColumn('auto_refresh_enabled', 'boolean', ['default' => false])
|
->addColumn('auto_refresh_enabled', 'boolean', ['default' => false])
|
||||||
->addColumn('margin_hot_fix_enabled', 'boolean', ['default' => false])
|
->addColumn('margin_hot_fix_enabled', 'boolean', ['default' => false])
|
||||||
->addColumn('custom_style', 'string', ['limit' => 255, 'null' => true])
|
->addColumn('custom_style', 'string', ['limit' => 255, 'null' => true])
|
||||||
->addColumn('created_at', 'timestamp', ['default' => 'CURRENT_TIMESTAMP'])
|
->addColumn('create', 'integer', ['null' => true])
|
||||||
->addColumn('updated_at', 'timestamp', ['default' => 'CURRENT_TIMESTAMP', 'update' => 'CURRENT_TIMESTAMP'])
|
->addColumn('edit', 'integer', ['null' => true])
|
||||||
|
->addColumn('create_by', 'integer', ['null' => true])
|
||||||
|
->addColumn('edit_by', 'integer', ['null' => true])
|
||||||
->create();
|
->create();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if($this->getEnvironment() == "addressdb") {
|
if($this->getEnvironment() == "addressdb") {
|
||||||
|
|||||||
51
public/css/views/RaspberryDisplay.css
Normal file
51
public/css/views/RaspberryDisplay.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
[v-cloak] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, 11.25vw);
|
||||||
|
grid-row-gap: 20px;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border: 2px solid #dee2e6;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: clamp(0.6rem, 0.8rem, 1.1rem);
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display > *:nth-child(1) {
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display > *:nth-child(2) {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display > *:nth-child(3) {
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-27-inch {
|
||||||
|
grid-column: span 1;
|
||||||
|
margin: 0 0.37vw;
|
||||||
|
width: calc(10.5vw);
|
||||||
|
height: calc(10.5vw * 9 / 16)
|
||||||
|
}
|
||||||
|
|
||||||
|
.big-42-inch {
|
||||||
|
grid-column: span 2;
|
||||||
|
margin: 0 0.37vw;
|
||||||
|
width: calc(21vw);
|
||||||
|
height: calc(21vw * 9 / 16)
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
63
public/js/pages/raspberryDisplay.js
Normal file
63
public/js/pages/raspberryDisplay.js
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
// noinspection JSJQueryEfficiency
|
||||||
|
|
||||||
|
Vue.filter('cleanupURL', function (value) {
|
||||||
|
value = value.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
|
||||||
|
return value;
|
||||||
|
})
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
mounted() {
|
||||||
|
this.fetchDisplays()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async rebootRaspberry(displayID) {
|
||||||
|
this.loading = true;
|
||||||
|
await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=reboot`, {
|
||||||
|
params: {
|
||||||
|
displayID: displayID
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
async fetchDisplays() {
|
||||||
|
this.loading = true;
|
||||||
|
const response = await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=getDisplays`);
|
||||||
|
this.displays = response.data.result;
|
||||||
|
this.loading = false;
|
||||||
|
Vue.nextTick(() => {
|
||||||
|
$('[data-toggle="tooltip"]').tooltip('dispose');
|
||||||
|
$('[data-toggle="tooltip"]').tooltip();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
enableDisplayURLEditMode(displayID) {
|
||||||
|
this.displaysURLEditMode = displayID;
|
||||||
|
const _this = this;
|
||||||
|
// wait for the DOM to update
|
||||||
|
Vue.nextTick(() => {
|
||||||
|
_this.$refs['displayURLEditInput'][0].focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
disableDisplayURLEditMode(displayID, displayURL) {
|
||||||
|
this.displaysURLEditMode = null;
|
||||||
|
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`, {
|
||||||
|
params: {
|
||||||
|
displayID: displayID,
|
||||||
|
field: field,
|
||||||
|
value: value,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await this.fetchDisplays();
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
loading: false,
|
||||||
|
displaysURLEditMode: null,
|
||||||
|
displays: null,
|
||||||
|
}
|
||||||
|
});
|
||||||
2
public/plugins/axios/axios.min.js
vendored
Normal file
2
public/plugins/axios/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/plugins/axios/axios.min.js.map
Normal file
1
public/plugins/axios/axios.min.js.map
Normal file
File diff suppressed because one or more lines are too long
45
public/plugins/vue/tt-components/README.md
Normal file
45
public/plugins/vue/tt-components/README.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# TheTool Vue Frontend Framework
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
### tt-page-title
|
||||||
|
|
||||||
|
The `tt-page-title` is used to create the Title and breadcumbs on the top of the page
|
||||||
|
#### Props
|
||||||
|
|
||||||
|
- `title`: String - The title of the current page. This will be displayed prominently at the top of the breadcrumb navigation bar.
|
||||||
|
- `path`: Array - An array of objects representing the breadcrumb path. Each object in the array should have the following properties:
|
||||||
|
- `text`: String - The display text for the breadcrumb item.
|
||||||
|
- `href`: String - The URL that the breadcrumb item links to.
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
Include the Component on the View
|
||||||
|
```php
|
||||||
|
$additionalJS = ["plugins/vue/tt-components/tt-page-title.js"];
|
||||||
|
```
|
||||||
|
|
||||||
|
Then use it inside the Vue App
|
||||||
|
```vue
|
||||||
|
<tt-page-title :title="'Your Page Title'" :path="[
|
||||||
|
{ text: 'Home', href: '/' },
|
||||||
|
{ text: 'Library', href: '/library' },
|
||||||
|
{ text: 'Data', href: '/library/data' } // Current Page
|
||||||
|
]"></tt-page-title>
|
||||||
|
```
|
||||||
|
|
||||||
|
### tt-loader
|
||||||
|
|
||||||
|
The `tt-loader` is used to display a loader
|
||||||
|
|
||||||
|
#### Usage
|
||||||
|
|
||||||
|
Include the Component on the View
|
||||||
|
```php
|
||||||
|
$additionalJS = ["plugins/vue/tt-components/tt-loader.js"];
|
||||||
|
$additionalCSS = ["plugins/vue/tt-components/css/tt-loader.css"];
|
||||||
|
```
|
||||||
|
|
||||||
|
Then use it inside the Vue App in the container where it should get full width
|
||||||
|
```vue
|
||||||
|
<tt-loader></tt-loader>
|
||||||
25
public/plugins/vue/tt-components/css/tt-loader.css
Normal file
25
public/plugins/vue/tt-components/css/tt-loader.css
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
.overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(10, 10, 10, 0.5); /* Semi-transparent black */
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center; /* Center the spinner vertically and horizontally */
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Define the transition */
|
||||||
|
.fade-enter-active, .fade-leave-active {
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */
|
||||||
|
{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
15
public/plugins/vue/tt-components/tt-loader.js
Normal file
15
public/plugins/vue/tt-components/tt-loader.js
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
Vue.component('tt-loader', {
|
||||||
|
template: `
|
||||||
|
<transition name="fade">
|
||||||
|
<div class="w-100 h-100" style="position: absolute;">
|
||||||
|
<div class="overlay" id="loading">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="spinner-border" role="status">
|
||||||
|
<span class="sr-only">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
`
|
||||||
|
});
|
||||||
19
public/plugins/vue/tt-components/tt-page-title.js
Normal file
19
public/plugins/vue/tt-components/tt-page-title.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
Vue.component('tt-page-title', {
|
||||||
|
props: ['title', 'path'],
|
||||||
|
template: `
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="page-title-box">
|
||||||
|
<div class="page-title-right">
|
||||||
|
<ol class="breadcrumb m-0">
|
||||||
|
<li class="breadcrumb-item" v-for="item in path" :key="item.text">
|
||||||
|
<a :href="item.href">{{ item.text }}</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<h4 class="page-title">{{ title }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
});
|
||||||
11932
public/plugins/vue/vue.js
Normal file
11932
public/plugins/vue/vue.js
Normal file
File diff suppressed because it is too large
Load Diff
11
public/plugins/vue/vue.min.js
vendored
Normal file
11
public/plugins/vue/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user