thetool/public/js/pages/RaspberryDisplay/RaspberryDisplay.js

Vue.filter('cleanupURL', function (value) {
    value = value.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
    return value;
})

Vue.component('RaspberryDisplay', {
    //language=Vue
    template: `
        <div class="card">
          <tt-loader v-if="loading"></tt-loader>

          <div class="p-2">
            <div style="display: grid; grid-template-columns: auto auto; justify-items: center;">
            <h3 style="justify-self: start;">8322 Studenzen NOC Displays</h3>
              <!-- Add turn on and turn off button here -->
              <div>
                <button class="btn btn-primary" @click="fetchDisplays">Refresh</button>
                <button class="btn btn-warning" @click="rebootRaspberry('all')">Reboot</button>
                <button class="btn btn-success" @click="displayPower('on')">Turn on</button>
                <button class="btn btn-danger" @click="displayPower('off')">Turn off</button>
              </div>
            </div>

            <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>
    `,

    data() {
        return {
            loading: false, displaysURLEditMode: null, displays: null, window: window
        }
    },
    mounted() {
        this.fetchDisplays().then()
    }, methods: {
        async rebootRaspberry(displayID) {
            this.loading = true;
            if (displayID === 'all') {
                await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=rebootAll`);
            } else {
                await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=reboot`, {
                    params: {
                        displayID: displayID
                    }
                })
            }
            this.loading = false;
        }, async displayPower(state) {
            this.loading = true;
            await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=displayPower`, {
                params: {
                    state: state
                }
            });
            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;
            if (this.displays.find(d => d.id === displayID).display_url !== displayURL) {
                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;
        }
    },


})