添加升级包上传功能
This commit is contained in:
parent
9ff6a45888
commit
fd2cbc8570
|
@ -103,14 +103,11 @@ export default defineComponent({
|
||||||
let loading = ref(false);
|
let loading = ref(false);
|
||||||
let upload_url = ref("");
|
let upload_url = ref("");
|
||||||
|
|
||||||
let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
show_dialog,
|
show_dialog,
|
||||||
loading,
|
loading,
|
||||||
upload_url,
|
upload_url,
|
||||||
uploader,
|
uploader,
|
||||||
select_options,
|
|
||||||
loga(a: any) {
|
loga(a: any) {
|
||||||
console.log(a);
|
console.log(a);
|
||||||
},
|
},
|
||||||
|
|
|
@ -95,14 +95,11 @@ export default defineComponent({
|
||||||
let loading = ref(false);
|
let loading = ref(false);
|
||||||
let upload_url = ref("");
|
let upload_url = ref("");
|
||||||
|
|
||||||
let select_options = [1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
show_dialog,
|
show_dialog,
|
||||||
loading,
|
loading,
|
||||||
upload_url,
|
upload_url,
|
||||||
uploader,
|
uploader,
|
||||||
select_options,
|
|
||||||
generatorFileUploadHeaders(files: File[]) {
|
generatorFileUploadHeaders(files: File[]) {
|
||||||
if (files.length > 0) {
|
if (files.length > 0) {
|
||||||
return [
|
return [
|
||||||
|
@ -128,7 +125,7 @@ export default defineComponent({
|
||||||
HttpProtocol.DefaultHttpPort.toString();
|
HttpProtocol.DefaultHttpPort.toString();
|
||||||
url.pathname = HttpProtocol.RequestUploadFile;
|
url.pathname = HttpProtocol.RequestUploadFile;
|
||||||
url.protocol = "http:";
|
url.protocol = "http:";
|
||||||
url.searchParams.append("type", HttpProtocol.HttpUploadTypeDatabase);
|
url.searchParams.append("type", HttpProtocol.UploadTypeDatabase);
|
||||||
upload_url.value = url.toString();
|
upload_url.value = url.toString();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -162,14 +159,13 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
$q.dialog({
|
$q.dialog({
|
||||||
title: "Confirm",
|
title: "Confirm",
|
||||||
message: $t.t(
|
message:
|
||||||
$t.t("data changes will take effect after the restart") +
|
$t.t("data changes will take effect after the restart") +
|
||||||
"!" +
|
"!" +
|
||||||
"<p class='text-red'>" +
|
"<p class='text-red'>" +
|
||||||
$t.t("reboot now") +
|
$t.t("reboot now") +
|
||||||
"?" +
|
"?" +
|
||||||
"</p>"
|
"</p>",
|
||||||
),
|
|
||||||
html: true,
|
html: true,
|
||||||
cancel: true,
|
cancel: true,
|
||||||
persistent: true,
|
persistent: true,
|
||||||
|
|
|
@ -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>
|
|
@ -6,9 +6,9 @@ export namespace HttpProtocol {
|
||||||
|
|
||||||
export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
|
export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";
|
||||||
export const UploadTypeMedia = "U_T_MEDIA";
|
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 UploadTypeRootFS = "U_T_ROOT_FS";
|
||||||
|
export const UploadTypeSoftware = "U_T_SOFTWARE";
|
||||||
|
|
||||||
export const kHeaderXFileLength = "X-File-Length";
|
export const kHeaderXFileLength = "X-File-Length";
|
||||||
export const kHeaderXFileMD5 = "X-File-MD5";
|
export const kHeaderXFileMD5 = "X-File-MD5";
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
// so you can safely delete all default props below
|
// so you can safely delete all default props below
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "MediaPlayerWebAPP",
|
title: "MediaPlayerWebApp",
|
||||||
failed: "失败",
|
failed: "失败",
|
||||||
fail: "失败",
|
fail: "失败",
|
||||||
Confirm: "确认",
|
Confirm: "确认",
|
||||||
|
@ -76,4 +76,16 @@ export default {
|
||||||
"data changes will take effect after the restart": "数据更改将在重启后生效",
|
"data changes will take effect after the restart": "数据更改将在重启后生效",
|
||||||
"reboot now": "现在重启",
|
"reboot now": "现在重启",
|
||||||
"reboot device command sended": "重启指令已发送",
|
"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: "文件系统",
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,13 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<q-toolbar class="shadow-2">
|
<q-toolbar class="shadow-2">
|
||||||
<q-btn
|
<q-btn-dropdown
|
||||||
|
v-touch-hold:10000.mouse="handleHold"
|
||||||
|
:disable-dropdown="!show_advanced_menu"
|
||||||
stretch
|
stretch
|
||||||
flat
|
flat
|
||||||
icon="img:icons/favicon-32x32.png"
|
icon="img:icons/favicon-32x32.png"
|
||||||
label="电视机拼接盒"
|
label="电视机拼接盒"
|
||||||
class="q-mr-sm"
|
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-separator vertical inset />
|
||||||
<q-btn
|
<q-btn
|
||||||
stretch
|
stretch
|
||||||
|
@ -64,15 +81,17 @@
|
||||||
<grid-setting-dialog ref="grid_setting_dialog" />
|
<grid-setting-dialog ref="grid_setting_dialog" />
|
||||||
<background-image-dialog ref="background_image_dialog" />
|
<background-image-dialog ref="background_image_dialog" />
|
||||||
<recovery-database-dialog ref="recovery_database_dialog" />
|
<recovery-database-dialog ref="recovery_database_dialog" />
|
||||||
|
<upgrade-dialog ref="upgrade_dialog" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent, ref } from "vue";
|
||||||
import { useStore } from "src/store";
|
import { useStore } from "src/store";
|
||||||
|
|
||||||
import GridSettingDialog from "src/components/GridSettingDialog.vue";
|
import GridSettingDialog from "src/components/GridSettingDialog.vue";
|
||||||
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
|
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
|
||||||
import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
|
import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
|
||||||
|
import UpgradeDialog from "src/components/UpgradeDialog.vue";
|
||||||
|
|
||||||
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
import EventBus, { EventNamesDefine } from "src/common/EventBus";
|
||||||
import { Protocol } from "src/entities/WSProtocol";
|
import { Protocol } from "src/entities/WSProtocol";
|
||||||
|
@ -89,6 +108,7 @@ export default defineComponent({
|
||||||
GridSettingDialog,
|
GridSettingDialog,
|
||||||
BackgroundImageDialog,
|
BackgroundImageDialog,
|
||||||
RecoveryDatabaseDialog,
|
RecoveryDatabaseDialog,
|
||||||
|
UpgradeDialog,
|
||||||
},
|
},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
|
@ -96,6 +116,8 @@ export default defineComponent({
|
||||||
let $q = useQuasar();
|
let $q = useQuasar();
|
||||||
let $t = useI18n();
|
let $t = useI18n();
|
||||||
|
|
||||||
|
let show_advanced_menu = ref(true);
|
||||||
|
|
||||||
interface _ResponseMessage {
|
interface _ResponseMessage {
|
||||||
packet: Protocol.PacketEntity;
|
packet: Protocol.PacketEntity;
|
||||||
data: string;
|
data: string;
|
||||||
|
@ -134,6 +156,7 @@ export default defineComponent({
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
show_advanced_menu,
|
||||||
async backupDB() {
|
async backupDB() {
|
||||||
let client = GlobalData.getInstance().getCurrentClient();
|
let client = GlobalData.getInstance().getCurrentClient();
|
||||||
if (client) {
|
if (client) {
|
||||||
|
@ -160,6 +183,9 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
handleHold() {
|
||||||
|
show_advanced_menu.value = true;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue