- 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

Layout/default/RaspberryDisplay/Index.php

@@ -1,131 +1,40 @@
 <?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 -->
-<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"><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 -->
+    <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
 
-<!-- TODO: export style to css -->
-<style>
-    [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)
-    }
-
-    .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>
-    </transition>
+    <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 displays2" :key="display.id"
+                <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">
@@ -135,11 +44,11 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
                         </div>
                         <div>
                             <div @click.prevent="enableDisplayURLEditMode(display.id)" style="cursor: pointer">
-                            <span v-if="displaysURLEditMode !== display.id">{{ display.display_url | cleanupURL }}</span>
+                                <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)"
+                                       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">
@@ -157,10 +66,10 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
                     <div>
                         <!-- Checkbox for Auto Refresh Enabled -->
                         <div style="display: inline-block" data-toggle="tooltip"
-                         :title="`Auto refresh is ${display.auto_refresh_enabled ? 'enabled' : 'disabled'}.`">
+                             :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)">
+                                   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>
 
@@ -169,105 +78,22 @@ include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php")
 
                         <!-- Checkbox for Margin Hotfix Enabled -->
                         <div style="display: inline-block" data-toggle="tooltip"
-                         :title="`Margin Hotfix is ${display.margin_hot_fix_enabled ? 'enabled' : 'disabled'}.`">
+                             :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)">
+                                   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>
-                    {{ display.display_label }}
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-<script>
-    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('/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>
+<script src="/js/pages/raspberryDisplay.js?<?=$git_merge_ts?>"></script>

Layout/default/header.php

@@ -23,7 +23,7 @@
         
         <?php if(isset($additionalCSS) && is_array($additionalCSS) && count($additionalCSS)): ?>
           <?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 endif; ?>
         
@@ -40,9 +40,18 @@
         <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>
 
+        <?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 foreach($additionalJS as $js): ?>
-            <script src="<?=self::getResourcePath()?><?=$js?>"></script>
+            <script src="<?=self::getResourcePath()?><?=$js?>?<?=$git_merge_ts?>"></script>
           <?php endforeach; ?>
         <?php endif; ?>
         

application/RaspberryDisplay/RaspberryDisplayController.php

@@ -4,9 +4,9 @@ use phpseclib3\Net\SSH2;
 
 class RaspberryDisplayController extends mfBaseController
 {
-    private $port = 22;
-    private $username = XINON_RASPBERRY_DISPLAY_SSH_USER;
-    private $password = XINON_RASPBERRY_DISPLAY_SSH_PASS;
+    private int $port = 22;
+    private string $username = XINON_RASPBERRY_DISPLAY_SSH_USER;
+    private string $password = XINON_RASPBERRY_DISPLAY_SSH_PASS;
 
     protected function init(): void
     {

db/migrations/20240213083717_add_raspberry_display_table.php

@@ -16,10 +16,11 @@ final class AddRaspberryDisplayTable extends AbstractMigration
                 ->addColumn('auto_refresh_enabled', 'boolean', ['default' => false])
                 ->addColumn('margin_hot_fix_enabled', 'boolean', ['default' => false])
                 ->addColumn('custom_style', 'string', ['limit' => 255, 'null' => true])
-                ->addColumn('created_at', 'timestamp', ['default' => 'CURRENT_TIMESTAMP'])
-                ->addColumn('updated_at', 'timestamp', ['default' => 'CURRENT_TIMESTAMP', 'update' => 'CURRENT_TIMESTAMP'])
+                ->addColumn('create', 'integer', ['null' => true])
+                ->addColumn('edit', 'integer', ['null' => true])
+                ->addColumn('create_by', 'integer', ['null' => true])
+                ->addColumn('edit_by', 'integer', ['null' => true])
                 ->create();
-
         }
         
         if($this->getEnvironment() == "addressdb") {

public/css/views/RaspberryDisplay.css

@@ -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;
+}

public/js/pages/raspberryDisplay.js

@@ -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,
+    }
+});

public/plugins/vue/tt-components/README.md

@@ -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>

public/plugins/vue/tt-components/css/tt-loader.css

@@ -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;
+}

public/plugins/vue/tt-components/tt-loader.js

@@ -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>
+  `
+});

public/plugins/vue/tt-components/tt-page-title.js

@@ -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>
+    `
+});