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;
            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;
        }
    },


})