added module for managing raspberry displays

Layout/default/RaspberryDisplay/Index.php

@@ -0,0 +1,273 @@
+<?php /** @noinspection PhpUndefinedClassInspection
+ * @var string $mfLayoutPackage
+ */
+include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
+
+<!-- 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 -->
+
+<!-- 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="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>
+                        <!-- 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>
+                    {{ 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>

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,119 @@
+<?php
+
+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;
+
+    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");
+        }
+
+        $return = match ($do) {
+            "getDisplays" => $this->getDisplaysApi(),
+            "change" => $this->change(),
+            "reboot" => $this->restartRaspberryPi($this->request->displayID),
+            "getConfig" => $this->getConfig(),
+            default => false,
+        };
+
+        $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,40 @@
+<?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('created_at', 'timestamp', ['default' => 'CURRENT_TIMESTAMP'])
+                ->addColumn('updated_at', 'timestamp', ['default' => 'CURRENT_TIMESTAMP', 'update' => 'CURRENT_TIMESTAMP'])
+                ->create();
+
+        }
+        
+        if($this->getEnvironment() == "addressdb") {
+          
+        }
+    }
+
+    public function down(): void
+    {
+        if($this->getEnvironment() == "thetool") {
+            $this->table('RaspberryDisplay')->drop();
+        }
+        
+        if($this->getEnvironment() == "addressdb") {
+          
+        }
+    }
+}