Merge branch 'feature/RaspberryDisplay' into 'master'

created RasberryDisplay Module

See merge request fronk/thetool!245

Layout/default/RaspberryDisplay/Index.php

@@ -0,0 +1,99 @@
+<?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="<?=self::getResourcePath()?>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; ?>
         
@@ -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()?>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; ?>
         

Layout/default/menu.php

@@ -26,6 +26,9 @@
             <a href="<?=self::getUrl("Dashboard")?>"><i class="fe-airplay"></i> Dashboard <div class="arrow-down"></div></a>
             <ul class="submenu">
               <li><a href="<?=self::getUrl("News")?>"><i class="far fa-fw fa-th-list text-info"></i> News</a></li>
+                <?php if($me->is("employee")): ?>
+              <li><a href="<?=self::getUrl("RaspberryDisplay")?>"><i class="far fa-fw fa-tv text-info"></i> Raspberry Display</a></li>
+                <?php endif; ?>
             </ul>
           </li>
           <?php endif; ?>

application/RaspberryDisplay/RaspberryDisplay.php

@@ -0,0 +1,6 @@
+<?php
+
+class RaspberryDisplay extends mfBaseModel
+{
+
+}

application/RaspberryDisplay/RaspberryDisplayController.php

@@ -0,0 +1,130 @@
+<?php
+
+use phpseclib3\Net\SSH2;
+
+class RaspberryDisplayController extends mfBaseController
+{
+    private int $port = 22;
+    private string $username = XINON_RASPBERRY_DISPLAY_SSH_USER;
+    private string $password = XINON_RASPBERRY_DISPLAY_SSH_PASS;
+
+    protected function init(): void
+    {
+        $me = new User();
+        $me->loadMe();
+        $this->me = $me;
+        $this->layout()->set("me", $me);
+    }
+
+    protected function restartRaspberryPi($id) {
+        $display = RaspberryDisplayModel::get($id);
+
+        $ssh = new SSH2($display->ip_address, $this->port);
+        $ssh->login($this->username, $this->password);
+        $ssh->exec('sudo reboot now');
+        return true;
+    }
+
+    protected function getDisplaysApi(): array
+    {
+        $displays = RaspberryDisplayModel::getAll();
+        $result = [];
+        foreach ($displays as $display) {
+            $result[] = [
+                "display_label" => $display->display_label,
+                "hostname" => $display->hostname,
+                "ip" => $display->ip_address,
+                "display_url" => $display->display_url,
+                "auto_refresh_enabled" => $display->auto_refresh_enabled === "1",
+                "margin_hot_fix_enabled" => $display->margin_hot_fix_enabled === "1",
+                "custom_style" => $display->custom_style,
+                "id" => $display->id,
+            ];
+        }
+        return $result;
+    }
+
+    protected function change()
+    {
+        $displayID = $this->request->displayID;
+        $field = $this->request->field;
+        $value = $this->request->value;
+        $value = $value === "true" ? 1 : ($value === "false" ? 0 : $value);
+        $display = RaspberryDisplayModel::get($displayID);
+        if ($display === null) {
+            return false;
+        }
+        $display->$field = $value;
+        $display->save();
+        return true;
+    }
+
+    protected function getConfig() {
+        $ip = $_SERVER['REMOTE_ADDR'];
+        $hostname = $this->request->hostname;
+
+        $displays = RaspberryDisplayModel::getByHostnameAndIp($hostname, $ip);
+
+        if ($displays === null) {
+            die("No display found for this hostname and ip:" . $hostname . " X " . $ip);
+        }
+
+        return array_map(function ($display) {
+            return [
+                "display_url" => $display->data->display_url,
+                "auto_refresh_enabled" => $display->data->auto_refresh_enabled === "1",
+                "margin_hot_fix_enabled" => $display->data->margin_hot_fix_enabled === "1",
+                "id" => $display->id,
+            ];
+        }
+            , $displays);
+    }
+    protected function apiAction() {
+        $do = $this->request->do;
+
+        if (!$this->me->is("employee") && !in_array($do, ["getDisplays", "change", "reboot"])) {
+            $this->redirect("dashboard");
+        }
+
+        switch ($do) {
+            case "getDisplays":
+                $return = $this->getDisplaysApi();
+                break;
+            case "change":
+                $return = $this->change();
+                break;
+            case "reboot":
+                $return = $this->restartRaspberryPi($this->request->displayID);
+                break;
+            case "getConfig":
+                $return = $this->getConfig();
+                break;
+            default:
+                $return = false;
+                break;
+        }
+
+
+        $data = [];
+
+        if ($return === true) {
+            $data = ["status" => "success"];
+            $this->returnJson($data);
+        }
+
+        if(!is_array($return) || !count($return)) {
+            $data = ["status" => "error"];
+            $this->returnJson($data);
+        }
+        $data['status'] = "OK";
+        $data['result'] = $return;
+        $this->returnJson($data);
+    }
+
+    protected function indexAction(): void
+    {
+        $this->layout()->setTemplate("RaspberryDisplay/Index");
+    }
+
+
+}

application/RaspberryDisplay/RaspberryDisplayModel.php

@@ -0,0 +1,103 @@
+<?php
+
+class RaspberryDisplayModel
+{
+    public $display_label;
+    public $hostname;
+    public $ip_address;
+    public $display_url;
+    public $auto_refresh_enabled;
+    public $margin_hot_fix_enabled;
+
+    public function __construct($data = [])
+    {
+        foreach ($data as $field => $value) {
+            if (property_exists(get_called_class(), $field)) {
+                $this->$field = $value;
+            }
+        }
+    }
+
+    public static function get($id)
+    {
+        $db = FronkDB::singleton();
+
+        $res = $db->select("RaspberryDisplay", "*", "id = $id");
+        if ($db->num_rows($res)) {
+            return new RaspberryDisplay($db->fetch_object($res));
+        }
+        return null;
+    }
+
+    public static function getByHostnameAndIp($hostname, $ip)
+    {
+        $db = FronkDB::singleton();
+
+        $res = $db->select("RaspberryDisplay", "*", "hostname = '$hostname' AND ip_address = '$ip'");
+        //fetch 2 rows
+
+        if ($db->num_rows($res)) {
+            while ($data = $db->fetch_object($res)) {
+                $items[] = new RaspberryDisplay($data);
+            }
+            return $items;
+        }
+
+    }
+
+    public static function create(array $data)
+    {
+        $model = new RaspberryDisplay();
+
+        foreach ($data as $field => $value) {
+            if (property_exists(get_called_class(), $field)) {
+                $model->$field = $value;
+            }
+        }
+
+        $me = new User();
+        $me->loadMe();
+
+        if ($model->create_by === null) {
+            $model->create_by = $me->id;
+        }
+        if ($model->edit_by === null) {
+            $model->edit_by = $me->id;
+        }
+
+        return $model;
+    }
+
+    public static function getAll()
+    {
+        $items = [];
+
+        $db = FronkDB::singleton();
+
+        $res = $db->select("RaspberryDisplay", "id, display_label, hostname, ip_address,custom_style, display_url, auto_refresh_enabled, margin_hot_fix_enabled");
+        if ($db->num_rows($res)) {
+            while ($data = $db->fetch_object($res)) {
+                $items[] = new RaspberryDisplay($data);
+            }
+        }
+        return $items;
+
+    }
+
+    public static function save(RaspberryDisplay $model)
+    {
+        $db = FronkDB::singleton();
+
+        $data = $model->data;
+
+        if ($model->id) {
+            $db->update("RaspberryDisplay", $data, "id=" . $model->id);
+        } else {
+            $model->create = date("U");
+            $model->edit = date("U");
+            $model->id = $db->insert("RaspberryDisplay", $data);
+        }
+
+        return $model;
+    }
+}

composer.json

@@ -1,8 +1,9 @@
 {
-    "require": {
-        "phpoffice/phpspreadsheet": "^1.23",
-        "robmorgan/phinx": "^0.13.4",
-        "textalk/websocket": "^1.6",
-        "chillerlan/php-qrcode": "dev-main"
-    }
+  "require": {
+    "phpoffice/phpspreadsheet": "^1.23",
+    "robmorgan/phinx": "^0.13.4",
+    "textalk/websocket": "^1.6",
+    "chillerlan/php-qrcode": "dev-main",
+    "phpseclib/phpseclib": "^3.0"
+  }
 }

config/config.sample.php

@@ -686,4 +686,8 @@ define("PDFTOTEXT_BIN_PATH", "/usr/bin/pdftotext");
 define("TT_MBI_API_ENABLE", true); //Enable API Calls
 define("TT_MBI_API_URL", "https://x.x.x.x/api/");
 define("TT_MBI_API_VERSION", "v01");
-define("TT_MBI_API_KEY", "");
+define("TT_MBI_API_KEY", "");
+
+//Raspberry Display Configuration
+define("XINON_RASPBERRY_DISPLAY_SSH_USER", "");
+define("XINON_RASPBERRY_DISPLAY_SSH_PASS", "");

db/migrations/20240213083717_add_raspberry_display_table.php

@@ -0,0 +1,41 @@
+<?php
+declare(strict_types=1);
+
+use Phinx\Migration\AbstractMigration;
+
+final class AddRaspberryDisplayTable extends AbstractMigration
+{
+    public function up(): void
+    {
+        if($this->getEnvironment() == "thetool") {
+            $table = $this->table('RaspberryDisplay');
+            $table->addColumn('display_label', 'string', ['limit' => 255])
+                ->addColumn('hostname', 'string', ['limit' => 255])
+                ->addColumn('ip_address', 'string', ['limit' => 15])
+                ->addColumn('display_url', 'string', ['limit' => 255])
+                ->addColumn('auto_refresh_enabled', 'boolean', ['default' => false])
+                ->addColumn('margin_hot_fix_enabled', 'boolean', ['default' => false])
+                ->addColumn('custom_style', 'string', ['limit' => 255, 'null' => true])
+                ->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 function down(): void
+    {
+        if($this->getEnvironment() == "thetool") {
+            $this->table('RaspberryDisplay')->drop();
+        }
+        
+        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>
+    `
+});