media_player_client/src/pages/TopToolBar.vue

<template>
  <div>
    <q-toolbar class="shadow-2">
      <q-btn-dropdown
        v-touch-hold:10000.mouse="handleHold"
        :disable-dropdown="!show_advanced_menu"
        stretch
        flat
        icon="img:icons/favicon-32x32.png"
        label="电视机拼接盒"
        class="q-mr-sm"
      >
        <q-list>
          <q-item
            clickable
            v-close-popup
            @click="$refs.upgrade_dialog.showDialog()"
          >
            <q-item-section avatar>
              <q-icon name="system_update" />
            </q-item-section>
            <q-item-section>
              {{ $t("upgrade") }}
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
      <q-separator vertical inset />
      <q-btn
        stretch
        flat
        icon="description"
        :label="$t('file manage')"
        class="q-mr-sm"
        @click="$refs.file_manage_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="grid_on"
        :label="$t('grid setting')"
        class="q-mr-sm"
        @click="$refs.grid_setting_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="image"
        :label="$t('background image')"
        class="q-mr-sm"
        @click="$refs.background_image_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="backup"
        :label="$t('data import')"
        class="q-mr-sm"
        @click="$refs.recovery_database_dialog.showDialog()"
      />
      <q-btn
        stretch
        flat
        icon="restore"
        :label="$t('data export')"
        class="q-mr-sm"
        @click="backupDB"
      />

      <q-space />
      <q-btn-dropdown
        stretch
        flat
        icon="devices"
        label="localhost"
        class="q-mr-sm"
      >
        <q-list>
          <q-item clickable v-close-popup>
            <q-item-section>
              <q-item-label>localhost</q-item-label>
              <q-item-label caption>localhost</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-btn-dropdown>
    </q-toolbar>
  </div>
  <grid-setting-dialog ref="grid_setting_dialog" />
  <background-image-dialog ref="background_image_dialog" />
  <recovery-database-dialog ref="recovery_database_dialog" />
  <upgrade-dialog ref="upgrade_dialog" />
  <file-manage-dialog ref="file_manage_dialog" />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useStore } from "src/store";

import GridSettingDialog from "src/components/GridSettingDialog.vue";
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
import UpgradeDialog from "src/components/UpgradeDialog.vue";
import FileManageDialog from "src/components/FileManageDialog.vue";

import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol";
import GlobalData from "src/common/GlobalData";
import { api } from "boot/axios";
import { HttpProtocol } from "src/entities/HttpProtocol";
import { openURL, useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { NotifyMessage } from "src/common/ClientConnection";

export default defineComponent({
  name: "PageTopToolBar",

  components: {
    GridSettingDialog,
    BackgroundImageDialog,
    RecoveryDatabaseDialog,
    UpgradeDialog,
    FileManageDialog,
  },

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_advanced_menu = ref(false);

    EventBus.getInstance().on(
      EventNamesDefine.NotifyMessage,
      (notify: NotifyMessage) => {
        if (notify) {
          switch (notify.packet.command) {
            case Protocol.Commands.kSetApplicationConfig:
              {
                let temp = JSON.parse(
                  notify.data
                ) as Protocol.ApplicationConfigChangeNotifyEntity;
                if (temp) {
                  let global_data = GlobalData.getInstance();
                  if (global_data && global_data.applicationConfig) {
                    (<any>GlobalData.getInstance().applicationConfig)[
                      temp.key
                    ] = temp.value;
                    $store.commit(
                      "setWallCol",
                      global_data.applicationConfig.wall_col
                    );
                    $store.commit(
                      "setWallRow",
                      global_data.applicationConfig.wall_row
                    );
                  }
                }
              }
              break;
          }
        }
      }
    );

    return {
      show_advanced_menu,
      async backupDB() {
        let client = GlobalData.getInstance().getCurrentClient();
        if (client) {
          let url = new URL(client.url);
          url.port =
            GlobalData.getInstance().applicationConfig?.httpserver_port ??
            HttpProtocol.DefaultHttpPort.toString();
          url.pathname = HttpProtocol.RequestPathUpdateDBBackupFile;
          url.protocol = "http:";
          console.log(url.toString());
          let response = await api.get(url.toString());
          console.log(response.data);
          if (response.status == 200 && response && response.data) {
            url.pathname =
              HttpProtocol.RequestPathDBBackup + "/" + response.data;
            openURL(url.toString());
          } else {
            $q.notify({
              type: "warning",
              message: $t.t("data export ") + $t.t("fail") + "!",
              position: "top",
              timeout: 1000,
            });
          }
        }
      },
      handleHold() {
        show_advanced_menu.value = true;
      },
    };
  },
});
</script>