media_player_client/src/components/UpgradeDialog.vue

<template>
  <q-dialog persistent v-model="show_dialog" @before-hide="resetData">
    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
      <q-form @submit="onSubmit">
        <q-card-section class="q-ma-none q-pa-sm">
          <div class="row">
            <div class="col-11 text-h6">
              {{ $t(upgrade_type) }}{{ $t("upgrade") }}
            </div>
            <div class="col-1">
              <q-btn
                :loading="loading"
                flat
                round
                icon="close"
                color="red"
                v-close-popup
              >
                <q-tooltip>
                  {{ $t("close") }}
                </q-tooltip>
              </q-btn>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-section style="max-height: 50vh; width: 35vw" class="scroll">
          <q-list>
            <q-item>
              <q-item-section>
                <q-select
                  :label="$t('upgrade type')"
                  :hint="$t('please input') + $t('upgrade type') + ':'"
                  :options="select_options"
                  v-model="upgrade_type"
                >
                </q-select>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-uploader
                  v-if="upgrade_type == 'software'"
                  class="full-width"
                  ref="uploader_software"
                  :url="upload_url_software"
                  method="post"
                  :headers="generatorFileUploadHeaders"
                  :label="$t('select software upgrade file') + ':'"
                  accept=".zip"
                  :hide-upload-btn="true"
                  @uploaded="onUploaded"
                  @failed="onFailed"
                />
                <q-uploader
                  v-if="upgrade_type == 'rootfs'"
                  class="full-width"
                  ref="uploader_rootfs"
                  :url="upload_url_rootfs"
                  method="post"
                  :headers="generatorFileUploadHeaders"
                  :label="$t('select rootfs upgrade file') + ':'"
                  accept=".img"
                  :hide-upload-btn="true"
                  @uploaded="onUploaded"
                  @failed="onFailed"
                />
              </q-item-section>
            </q-item>
          </q-list>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            :loading="loading"
            flat
            :label="$t('Cancel')"
            color="primary"
            v-close-popup
          />
          <q-btn
            ref="accept"
            flat
            :label="$t('Accept')"
            :loading="loading"
            type="submit"
            color="primary"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import { HttpProtocol } from "src/entities/HttpProtocol";

export default defineComponent({
  name: "ComponentUpgradeDialog",

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

    let show_dialog = ref(false);
    let uploader_software: any = ref(null);
    let uploader_rootfs: any = ref(null);
    let loading = ref(false);
    let upload_url_software = ref("");
    let upload_url_rootfs = ref("");

    let select_options = ["software", "rootfs"];
    let upgrade_type = ref("software");

    return {
      show_dialog,
      loading,
      upload_url_software,
      upload_url_rootfs,
      uploader_software,
      uploader_rootfs,
      upgrade_type,
      select_options,
      generatorFileUploadHeaders(files: File[]) {
        if (files.length > 0) {
          return [
            {
              name: HttpProtocol.kHeaderXProductName,
              value: HttpProtocol.kHeaderDefaultValueXProductName,
            },
            {
              name: HttpProtocol.kHeaderXFileLength,
              value: files[0].size,
            },
          ];
        }
        return [];
      },
      showDialog() {
        show_dialog.value = true;

        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.RequestUploadFile;
          url.protocol = "http:";
          url.searchParams.append("type", HttpProtocol.UploadTypeRootFS);
          upload_url_rootfs.value = url.toString();

          url.searchParams.set("type", HttpProtocol.UploadTypeSoftware);
          upload_url_software.value = url.toString();
        }
      },
      resetData() {
        loading.value = false;
        upload_url_software.value = "";
        upload_url_rootfs.value = "";
      },
      async onSubmit() {
        loading.value = true;
        try {
          $q.dialog({
            title: "Confirm",
            message: $t.t("use this file to upgrade") + "?",
            cancel: true,
            persistent: true,
          })
            .onOk(() => {
              upgrade_type.value == "software"
                ? uploader_software.value.upload()
                : uploader_rootfs.value.upload();
            })
            .onCancel(() => {
              loading.value = false;
            });
        } catch {}
      },
      onUploaded() {
        $q.notify({
          type: "positive",
          message: $t.t("upgrade file upload") + $t.t("success") + "!",
          position: "top",
          timeout: 1000,
        });
        $q.dialog({
          title: "Confirm",
          message:
            $t.t("upgrade requires a restart") +
            "!" +
            "<p class='text-red'>" +
            $t.t("reboot now") +
            "?" +
            "</p>",
          html: true,
          cancel: true,
          persistent: true,
        })
          .onOk(() => {
            GlobalData.getInstance().getCurrentClient()?.restartDevice();
            $q.notify({
              type: "positive",
              message: $t.t("reboot device command sended") + "!",
              position: "top",
              timeout: 1000,
            });
          })
          .onDismiss(() => {
            loading.value = false;
            show_dialog.value = false;
          });
      },
      onFailed(info: any) {
        console.log(info);
        $q.notify({
          type: "warning",
          message: $t.t("data import") + $t.t("fail") + "!",
          position: "top",
          timeout: 1000,
        });
        loading.value = false;
      },
    };
  },
});
</script>