lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加升级包上传功能

This commit is contained in:
fangxiang 2021-08-16 14:22:43 +08:00
parent 9ff6a45888
commit fd2cbc8570
6 changed files with 291 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/BackgroundImageDialog.vue
View File

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

18
src/components/RecoveryDatabaseDialog.vue
View File

@ -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,

240
src/components/UpgradeDialog.vue Normal file
View File

@ -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>

4
src/entities/HttpProtocol.ts
View File

@ -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";

14
src/i18n/zh-CN/index.ts
View File

@ -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: "文件系统",
};

32
src/pages/TopToolBar.vue
View File

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