添加升级包上传功能

2021-08-16 14:22:43 +08:00 · 2021-08-16 14:22:43 +08:00 · fd2cbc8570
parent 9ff6a45888
commit fd2cbc8570
6 changed files with 291 additions and 20 deletions
--- a/src/components/BackgroundImageDialog.vue
+++ b/src/components/BackgroundImageDialog.vue
@ -103,14 +103,11 @@ export default defineComponent({
    let loading = ref(false);
    let upload_url = ref("");

-    let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-
    return {
      show_dialog,
      loading,
      upload_url,
      uploader,
-      select_options,
      loga(a: any) {
        console.log(a);
      },
--- a/src/components/RecoveryDatabaseDialog.vue
+++ b/src/components/RecoveryDatabaseDialog.vue
@ -95,14 +95,11 @@ export default defineComponent({
    let loading = ref(false);
    let upload_url = ref("");

-    let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-
    return {
      show_dialog,
      loading,
      upload_url,
      uploader,
-      select_options,
      generatorFileUploadHeaders(files: File[]) {
        if (files.length > 0) {
          return [
@ -128,7 +125,7 @@ export default defineComponent({
            HttpProtocol.DefaultHttpPort.toString();
          url.pathname = HttpProtocol.RequestUploadFile;
          url.protocol = "http:";
-          url.searchParams.append("type", HttpProtocol.HttpUploadTypeDatabase);
+          url.searchParams.append("type", HttpProtocol.UploadTypeDatabase);
          upload_url.value = url.toString();
        }
      },
@ -162,14 +159,13 @@ export default defineComponent({
        });
        $q.dialog({
          title: "Confirm",
-          message: $t.t(
+          message:
            $t.t("data changes will take effect after the restart") +
-              "!" +
-              "<p class='text-red'>" +
-              $t.t("reboot now") +
-              "?" +
-              "</p>"
-          ),
+            "!" +
+            "<p class='text-red'>" +
+            $t.t("reboot now") +
+            "?" +
+            "</p>",
          html: true,
          cancel: true,
          persistent: true,
--- a/src/components/UpgradeDialog.vue
+++ b/src/components/UpgradeDialog.vue
@ -0,0 +1,240 @@
+<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>
--- a/src/entities/HttpProtocol.ts
+++ b/src/entities/HttpProtocol.ts
@ -6,9 +6,9 @@ export namespace HttpProtocol {

  export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
  export const UploadTypeMedia = "U_T_MEDIA";
-  export const HttpUploadTypeDatabase = "U_T_DATABASE";
-
+  export const UploadTypeDatabase = "U_T_DATABASE";
  export const UploadTypeRootFS = "U_T_ROOT_FS";
+  export const UploadTypeSoftware = "U_T_SOFTWARE";

  export const kHeaderXFileLength = "X-File-Length";
  export const kHeaderXFileMD5 = "X-File-MD5";
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@ -2,7 +2,7 @@
 // so you can safely delete all default props below

 export default {
-  title: "MediaPlayerWebAPP",
+  title: "MediaPlayerWebApp",
  failed: "失败",
  fail: "失败",
  Confirm: "确认",
@ -76,4 +76,16 @@ export default {
  "data changes will take effect after the restart": "数据更改将在重启后生效",
  "reboot now": "现在重启",
  "reboot device command sended": "重启指令已发送",
+  "software upgrade": "软件升级",
+  "rootfs upgrade": "文件系统升级",
+  upgrade: "升级",
+  "select upgrade file": "选择升级文件",
+  "upgrade type": "升级类型",
+  "select rootfs upgrade file": "选择文件系统升级文件",
+  "select software upgrade file": "选择软件升级文件",
+  "upgrade requires a restart": "升级需要重启",
+  "upgrade file upload": "升级文件上传",
+  "use this file to upgrade": "使用这个升级文件",
+  software: "软件",
+  rootfs: "文件系统",
 };
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@ -1,13 +1,30 @@
 <template>
  <div>
    <q-toolbar class="shadow-2">
-      <q-btn
+      <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
@ -64,15 +81,17 @@
  <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" />
 </template>

 <script lang="ts">
-import { defineComponent } from "vue";
+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 EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { Protocol } from "src/entities/WSProtocol";
@ -89,6 +108,7 @@ export default defineComponent({
    GridSettingDialog,
    BackgroundImageDialog,
    RecoveryDatabaseDialog,
+    UpgradeDialog,
  },

  setup() {
@ -96,6 +116,8 @@ export default defineComponent({
    let $q = useQuasar();
    let $t = useI18n();

+    let show_advanced_menu = ref(true);
+
    interface _ResponseMessage {
      packet: Protocol.PacketEntity;
      data: string;
@ -134,6 +156,7 @@ export default defineComponent({
    );

    return {
+      show_advanced_menu,
      async backupDB() {
        let client = GlobalData.getInstance().getCurrentClient();
        if (client) {
@ -160,6 +183,9 @@ export default defineComponent({
          }
        }
      },
+      handleHold() {
+        show_advanced_menu.value = true;
+      },
    };
  },
 });