将数据恢复,底图上传,查看底图,升级的http转化

This commit is contained in:
miao 2023-02-15 11:36:19 +08:00 committed by fangxiang
parent 71abf1bba2
commit e68eb4c8d6
6 changed files with 463 additions and 547 deletions

View File

@ -1,256 +1,226 @@
<template>
<q-dialog
persistent
v-model="show_dialog"
@before-hide="resetData"
@keydown="
(evt) => {
if (!loading && evt.keyCode == 27) {
show_dialog = false;
}
}
"
>
<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("background image") }}
</div>
<div class="col-1">
<q-btn
:loading="loading"
flat
round
icon="close"
:disable="loading"
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-uploader
class="full-width"
ref="uploader"
:url="upload_url"
method="post"
:headers="generatorFileUploadHeaders"
:label="$t('select background image') + ':'"
:accept="$store.state.isSpecialVideo() ? '.svdoj' : 'image/*'"
:hide-upload-btn="true"
@uploaded="onUploaded"
@failed="onFailed"
@added="(files) => files && (file_count += files.length)"
@removed="(files) => files && (file_count -= files.length)"
/>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-separator />
<q-card-actions align="left">
<q-btn
v-if="$store.state.isLedPlayer()"
flat
no-caps
:loading="loading"
color="primary"
@click="showBackgroundImage"
:label="$t('view current background image')"
/>
<q-space />
<q-btn
:loading="loading"
flat
:label="$t('Cancel')"
no-caps
color="primary"
v-close-popup
/>
<q-btn
ref="accept"
flat
:label="$t('Accept')"
no-caps
: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";
import { api as viewerApi } from "v-viewer";
export default defineComponent({
name: "ComponentBackgroundImageDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let uploader: any = ref(null);
let loading = ref(false);
let upload_url = ref("");
let file_count = ref(0);
return {
show_dialog,
loading,
upload_url,
uploader,
file_count,
loga(a: any) {
console.log(a);
},
generatorFileUploadHeaders(files: File[]) {
if (files.length > 0) {
return [
{
name: HttpProtocol.kHeaderXProductName,
value: HttpProtocol.getProductName($store),
},
{
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.UploadTypeBackgroundImage
);
upload_url.value = url.toString();
}
},
resetData() {
loading.value = false;
upload_url.value = "";
file_count.value = 0;
},
showBackgroundImage() {
const temp_port =
GlobalData.getInstance().applicationConfig?.httpserver_port ??
HttpProtocol.DefaultHttpPort.toString();
try {
const url = new URL(
GlobalData.getInstance().getCurrentClient()?.url ??
"http://127.0.0.1:" + temp_port
);
url.protocol = "http";
url.port = temp_port.toString();
url.pathname = "/static/background_image.png";
viewerApi({
options: {
toolbar: true,
url: "data-source",
initialViewIndex: 0,
},
images: [
{
src: url.toString(),
"data-source": url.toString(),
},
],
});
} catch {}
},
async onSubmit() {
if (file_count.value <= 0) {
$q.notify({
type: "warning",
message: $t.t("please select file first") + "!",
position: "top",
timeout: 1500,
});
return;
}
loading.value = true;
try {
$q.dialog({
title: $t.t("Confirm"),
message: $t.t("use this image to background image") + "?",
ok: {
label: $t.t("ok"),
noCaps: true,
flat: true,
},
cancel: {
label: $t.t("cancel"),
noCaps: true,
flat: true,
},
persistent: true,
})
.onOk(() => {
uploader.value.upload();
})
.onCancel(() => {
loading.value = false;
});
} catch {}
},
onUploaded() {
$q.notify({
type: "positive",
message: $t.t("upload background image") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
loading.value = false;
show_dialog.value = false;
},
onFailed(info: any) {
console.log(info);
$q.notify({
type: "warning",
message: $t.t("upload background image") + $t.t("fail") + "!",
position: "top",
timeout: 1500,
});
loading.value = false;
},
};
},
});
</script>
<template>
<q-dialog
persistent
v-model="show_dialog"
@before-hide="resetData"
@keydown="
(evt) => {
if (!loading && evt.keyCode == 27) {
show_dialog = false;
}
}
"
>
<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("background image") }}
</div>
<div class="col-1">
<q-btn
:loading="loading"
flat
round
icon="close"
:disable="loading"
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-uploader
class="full-width"
ref="uploader"
:url="upload_url"
method="post"
:label="$t('select background image') + ':'"
:accept="$store.state.isSpecialVideo() ? '.svdoj' : 'image/*'"
:hide-upload-btn="true"
@uploaded="onUploaded"
@failed="onFailed"
@added="(files) => files && (file_count += files.length)"
@removed="(files) => files && (file_count -= files.length)"
/>
<!-- :headers="generatorFileUploadHeaders" -->
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-separator />
<q-card-actions align="left">
<q-btn
v-if="$store.state.isLedPlayer()"
flat
no-caps
:loading="loading"
color="primary"
@click="showBackgroundImage()"
:label="$t('view current background image')"
/>
<q-space />
<q-btn
:loading="loading"
flat
:label="$t('Cancel')"
no-caps
color="primary"
v-close-popup
/>
<q-btn
ref="accept"
flat
:label="$t('Accept')"
no-caps
: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";
import { api as viewerApi } from "v-viewer";
export default defineComponent({
name: "ComponentBackgroundImageDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let uploader: any = ref(null);
let loading = ref(false);
let upload_url = ref("");
let file_count = ref(0);
return {
show_dialog,
loading,
upload_url,
uploader,
file_count,
loga(a: any) {
console.log(a);
},
showDialog() {
show_dialog.value = true;
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
url.pathname = "/upload_background_image_file";
upload_url.value = url.toString();
}
},
resetData() {
loading.value = false;
upload_url.value = "";
file_count.value = 0;
},
showBackgroundImage() {
try {
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
url.pathname = "/get_background_image_file";
viewerApi({
options: {
toolbar: true,
url: "data-source",
initialViewIndex: 0,
},
images: [
{
src: url.toString(),
"data-source": url.toString(),
},
],
});
}
} catch {}
},
async onSubmit() {
if (file_count.value <= 0) {
$q.notify({
type: "warning",
message: $t.t("please select file first") + "!",
position: "top",
timeout: 1500,
});
return;
}
loading.value = true;
try {
$q.dialog({
title: $t.t("Confirm"),
message: $t.t("use this image to background image") + "?",
ok: {
label: $t.t("ok"),
noCaps: true,
flat: true,
},
cancel: {
label: $t.t("cancel"),
noCaps: true,
flat: true,
},
persistent: true,
})
.onOk(() => {
uploader.value.upload();
})
.onCancel(() => {
loading.value = false;
});
} catch {}
},
onUploaded() {
$q.notify({
type: "positive",
message: $t.t("upload background image") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
loading.value = false;
show_dialog.value = false;
},
onFailed(info: any) {
console.log(info);
$q.notify({
type: "warning",
message: $t.t("upload background image") + $t.t("fail") + "!",
position: "top",
timeout: 1500,
});
loading.value = false;
},
};
},
});
</script>

View File

@ -1065,12 +1065,13 @@ export default defineComponent({
setTimeout(() => {
if (files.value.length != file_list.files.length) {
$q.notify({
type: "warning",
message: $t.t("file upload") + $t.t("fail") + "!",
type: "positive",
message: $t.t("file upload") + $t.t("finish") + "!",
position: "top",
timeout: 1500,
});
loading.value = false;
uploading.value=false;
}
}, 500);
},

View File

@ -1,247 +1,225 @@
<template>
<q-dialog
persistent
v-model="show_dialog"
@before-hide="resetData"
@keydown="
(evt) => {
if (!loading && evt.keyCode == 27) {
show_dialog = false;
}
}
"
>
<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-auto text-h6">
{{ $t("database import") }}
</div>
<q-space />
<div>
<q-btn
:loading="loading"
flat
round
icon="close"
:disable="loading"
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-uploader
class="full-width"
ref="uploader"
:url="upload_url"
method="post"
:headers="generatorFileUploadHeaders"
:label="$t('select data(DBP) file') + ':'"
accept=".dbp"
:hide-upload-btn="true"
@uploaded="onUploaded"
@failed="onFailed"
@added="(files) => files && (file_count += files.length)"
@removed="(files) => files && (file_count -= files.length)"
/>
</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')"
no-caps
color="primary"
v-close-popup
/>
<q-btn
ref="accept"
flat
:label="$t('Accept')"
no-caps
: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";
import { api as viewerApi } from "v-viewer";
export default defineComponent({
name: "ComponentRecoveryDatabaseDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let uploader: any = ref(null);
let loading = ref(false);
let upload_url = ref("");
let file_count = ref(0);
return {
show_dialog,
loading,
upload_url,
uploader,
file_count,
generatorFileUploadHeaders(files: File[]) {
if (files.length > 0) {
return [
{
name: HttpProtocol.kHeaderXProductName,
value: HttpProtocol.getProductName($store),
},
{
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.UploadTypeDatabase);
upload_url.value = url.toString();
}
},
resetData() {
loading.value = false;
upload_url.value = "";
file_count.value = 0;
},
async onSubmit() {
if (file_count.value <= 0) {
$q.notify({
type: "warning",
message: $t.t("please select file first") + "!",
position: "top",
timeout: 1500,
});
return;
}
loading.value = true;
try {
$q.dialog({
title: $t.t("Confirm"),
message: $t.t("use this file to recovery data") + "?",
ok: {
label: $t.t("ok"),
noCaps: true,
flat: true,
},
cancel: {
label: $t.t("cancel"),
noCaps: true,
flat: true,
},
persistent: true,
})
.onOk(() => {
uploader.value.upload();
})
.onCancel(() => {
loading.value = false;
});
} catch {}
},
onUploaded() {
$q.notify({
type: "positive",
message: $t.t("data import") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
$q.dialog({
title: $t.t("Confirm"),
message:
$t.t("data changes will take effect after the restart") +
"!" +
"<p class='text-red'>" +
$t.t("reboot now") +
"?" +
"</p>",
html: true,
ok: {
label: $t.t("ok"),
noCaps: true,
flat: true,
},
cancel: {
label: $t.t("cancel"),
noCaps: true,
flat: true,
},
persistent: true,
})
.onOk(() => {
GlobalData.getInstance().getCurrentClient()?.restartDevice();
$q.notify({
type: "positive",
message: $t.t("reboot device command sended") + "!",
position: "top",
timeout: 1500,
});
})
.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: 1500,
});
loading.value = false;
},
};
},
});
</script>
<template>
<q-dialog
persistent
v-model="show_dialog"
@before-hide="resetData"
@keydown="
(evt) => {
if (!loading && evt.keyCode == 27) {
show_dialog = false;
}
}
"
>
<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-auto text-h6">
{{ $t("database import") }}
</div>
<q-space />
<div>
<q-btn
:loading="loading"
flat
round
icon="close"
:disable="loading"
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-uploader
class="full-width"
ref="uploader"
:url="upload_url"
method="POST"
:label="$t('select data(DBP) file') + ':'"
accept=".dbp"
:hide-upload-btn="true"
@uploaded="onUploaded"
@failed="onFailed"
@added="(files) => files && (file_count += files.length)"
@removed="(files) => files && (file_count -= files.length)"
/>
</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')"
no-caps
color="primary"
v-close-popup
/>
<q-btn
ref="accept"
flat
:label="$t('Accept')"
no-caps
: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";
import { api as viewerApi } from "v-viewer";
export default defineComponent({
name: "ComponentRecoveryDatabaseDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let uploader: any = ref(null);
let loading = ref(false);
let upload_url = ref("");
let file_count = ref(0);
return {
show_dialog,
loading,
upload_url,
uploader,
file_count,
showDialog() {
show_dialog.value = true;
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
url.pathname = "/upload_db_file";
upload_url.value = url.toString();
}
},
resetData() {
loading.value = false;
upload_url.value = "";
file_count.value = 0;
},
async onSubmit() {
if (file_count.value <= 0) {
$q.notify({
type: "warning",
message: $t.t("please select file first") + "!",
position: "top",
timeout: 1500,
});
return;
}
loading.value = true;
try {
$q.dialog({
title: $t.t("Confirm"),
message: $t.t("use this file to recovery data") + "?",
ok: {
label: $t.t("ok"),
noCaps: true,
flat: true,
},
cancel: {
label: $t.t("cancel"),
noCaps: true,
flat: true,
},
persistent: true,
})
.onOk(() => {
uploader.value.upload();
})
.onCancel(() => {
loading.value = false;
});
} catch {}
},
onUploaded() {
$q.notify({
type: "positive",
message: $t.t("data import") + $t.t("success") + "!",
position: "top",
timeout: 1500,
});
$q.dialog({
title: $t.t("Confirm"),
message:
$t.t("data changes will take effect after the restart") +
"!" +
"<p class='text-red'>" +
$t.t("reboot now") +
"?" +
"</p>",
html: true,
ok: {
label: $t.t("ok"),
noCaps: true,
flat: true,
},
cancel: {
label: $t.t("cancel"),
noCaps: true,
flat: true,
},
persistent: true,
})
.onOk(() => {
GlobalData.getInstance().getCurrentClient()?.restartDevice();
$q.notify({
type: "positive",
message: $t.t("reboot device command sended") + "!",
position: "top",
timeout: 1500,
});
})
.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: 1500,
});
loading.value = false;
},
};
},
});
</script>

View File

@ -61,7 +61,6 @@
ref="uploader_software"
:url="upload_url_software"
method="post"
:headers="generatorFileUploadHeaders"
:label="$t('select software upgrade file') + ':'"
accept=".zip,.tar,.tar.gz"
:hide-upload-btn="true"
@ -76,7 +75,6 @@
ref="uploader_rootfs"
:url="upload_url_rootfs"
method="post"
:headers="generatorFileUploadHeaders"
:label="$t('select rootfs upgrade file') + ':'"
accept=".img"
:hide-upload-btn="true"
@ -85,6 +83,7 @@
@added="(files) => files && (file_count += files.length)"
@removed="(files) => files && (file_count -= files.length)"
/>
<!-- :headers="generatorFileUploadHeaders" -->
</q-item-section>
</q-item>
</q-list>
@ -92,9 +91,7 @@
<q-separator />
<q-card-actions>
<q-item-section>V: {{ server_version }}</q-item-section>
<q-space />
<q-card-actions align="right">
<q-btn
:loading="loading"
flat
@ -146,7 +143,6 @@ export default defineComponent({
let select_options = [$t.t("software"), $t.t("rootfs")];
let upgrade_type = ref($t.t("software"));
const server_version = ref("unknow");
return {
show_dialog,
@ -158,49 +154,18 @@ export default defineComponent({
file_count,
upgrade_type,
select_options,
server_version,
generatorFileUploadHeaders(files: File[]) {
if (files.length > 0) {
return [
{
name: HttpProtocol.kHeaderXProductName,
value: HttpProtocol.getProductName($store),
},
{
name: HttpProtocol.kHeaderXFileLength,
value: files[0].size,
},
];
}
return [];
},
loga(a: any) {
console.log(a);
},
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);
let url = GlobalData.getInstance().createCurrentRequestUrl();
if (url) {
url.pathname = "/upload_soft_file";
upload_url_software.value = url.toString();
try {
client?.getBuildInfo()?.then((build_info) => {
if (build_info) {
server_version.value = build_info.version;
}
});
// console.log(build_info);
} catch {}
url.pathname = "/upload_root_fs_file";
upload_url_rootfs.value = url.toString();
}
},
resetData() {

View File

@ -294,6 +294,7 @@ export default {
"open left tool bar": "Open Left Tool Bar",
"open right tool bar": "Open Right Tool Bar",
fail: " Fail",
finish:"Finish",
"edit group": "Edit Group",
"open window": "Open Window",
"close all windows": "Close All Windows",

View File

@ -5,6 +5,7 @@ export default {
" ": "",
title: "MediaPlayerWebApp",
failed: "失败",
finish:"完成",
fail: "失败",
error: "错误",
Confirm: "确认",