thunfisch
/
linkpi_firmware_history
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
linkpi_firmware_history/rootfs/link/webflex/rproxy.php

233 lines
11 KiB
PHP
Raw Normal View History

rootfs_enc1v2_hi3520d_20231130
2024-02-15 22:07:50 +01:00
<?php include ("./link/session.php") ?>
<!doctype html>
<html lang="uft-8">
<head>
<?php include ("./public/head.inc") ?>
</head>
<body>
<?php include ("./public/menu.inc") ?>
<div data-simplebar>
<main class="page-content rproxy" id="app" v-cloak>
<div class="row">
<div class="col-lg-6 mqtt lp-equal-height-container">
<div class="card lp-equal-height-item">
<div class="card-header bg-transparent">
<div class="p-2 mb-0 d-flex align-items-end">
<cn>远程访问</cn>
<en>Reverse Proxy</en>
</div>
</div>
<div class="card-body d-flex flex-column justify-content-between" v-if="Object.keys(mqttConf).length > 0">
<div class="row"></div>
<div class="row"></div>
<div class="row">
<div class="col-lg-3 offset-lg-1 lp-align-center">
<label>
<cn>启用</cn>
<en>Enable</en>
</label>
</div>
<div class="col-lg-6">
<bs-switch v-model="mqttConf.enable" :size="'normal'"></bs-switch>
</div>
</div>
<div class="row">
<div class="col-lg-3 offset-lg-1 lp-align-center">
<label>
<cn>状态</cn>
<en>Connect</en>
</label>
</div>
<div class="col-lg-6">
<span v-html="mqttConnect"></span>
</div>
</div>
<div class="row">
<div class="col-lg-3 offset-lg-1 lp-align-center">
<label>
<cn>设备名</cn>
<en>Device name</en>
</label>
</div>
<div class="col-lg-6">
<input class="form-control" v-model="mqttConf.name">
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<button type="button" class="btn border-3 btn-primary px-4 me-3" @click="bindMqtt">
<cn>扫码绑定</cn>
<en>Bind</en>
</button>
<button type="button" class="btn border-3 btn-primary px-4 me-3" @click="updateMqttConf">
<cn>保存</cn>
<en>Save</en>
</button>
</div>
</div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
</div>
<div class="col-lg-6 lp-equal-height-container">
<div class="card lp-equal-height-item">
<div class="card-header bg-transparent">
<div class="p-2 mb-0 d-flex align-items-end">
<cn>Rtty</cn>
<en>Rtty</en>
</div>
</div>
<div class="card-body pb-4 gpio-btn">
<div class="row mt-3" v-if="Object.keys(rttyConf).length > 0">
<div class="col-lg-2 offset-lg-1 lp-align-center">
<label>
<cn>启用</cn>
<en>Enable</en>
</label>
</div>
<div class="col-lg-6">
<bs-switch v-model="rttyConf.enable" :size="'normal'"></bs-switch>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-2 offset-lg-1 d-flex justify-content-center">
<label>
<cn>描述</cn>
<en>Desc</en>
</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" v-model.trim.lazy="rttyConf.des">
</div>
</div>
<div class="row mt-3">
<div class="col-lg-2 offset-lg-1 d-flex justify-content-center">
<label>
<cn>IP</cn>
<en>IP</en>
</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" v-model.trim.lazy="rttyConf.ip">
</div>
</div>
<div class="row mt-3">
<div class="col-lg-2 offset-lg-1 d-flex justify-content-center">
<label>
<cn>ID</cn>
<en>ID</en>
</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control disabled" disabled readonly v-model.trim.lazy="rttyConf.id">
</div>
</div>
<div class="row mt-3">
<div class="col-lg-2 offset-lg-1 d-flex justify-content-center">
<label>
<cn>Token</cn>
<en>Token</en>
</label>
</div>
<div class="col-lg-8">
<input type="text" class="form-control" v-model.trim.lazy="rttyConf.token">
</div>
</div>
<div class="row mt-4">
<div class="col-lg-12 text-center">
<button type="button" class="btn border-3 btn-primary px-4" @click="saveRttyConf">
<cn>保存</cn>
<en>Save</en>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<mqtt-modal :modal-title="'扫一扫绑定设备&Scan qrcode'" :modal-show="showMqttModal"
:had-confirm-btn="false" :cancel-btn-name="'确定&OK'" @modal-visible="onModalVisible">
<div class="text-center" ref="qrcodeHandler"></div>
</mqtt-modal>
</main>
</div>
<?php include ("./public/foot.inc") ?>
<script src="assets/plugins/qrcode/qrcode.js"></script>
<script type="module">
import { rpc4,func,alertMsg } from "./assets/js/lp.utils.js";
import { useMqttConf,useRttyConf } from "./assets/js/vue.hooks.js";
rootfs_enc1v2_hi3520d_20240131
2024-02-15 22:07:54 +01:00
import { ignoreCustomElementPlugin,filterKeywordPlugin,bootstrapSwitchComponent,customModalComponent } from "./assets/js/vue.helper.js"
rootfs_enc1v2_hi3520d_20231130
2024-02-15 22:07:50 +01:00
import vue from "./assets/js/vue.build.js";
const {createApp,ref,reactive,watch,watchEffect,computed,onMounted} = vue;
const app = createApp({
components:{
"bs-switch" : bootstrapSwitchComponent,
"mqtt-modal": customModalComponent
},
setup(props,context) {
const { mqttConf,updateMqttConf } = useMqttConf();
const { rttyConf,updateRttyConf } = useRttyConf();
const state = {
mqttConnect : ref("<cn>未连接</cn><en>not connected</en>"),
qrcodeHandler: ref(null),
showMqttModal: ref(false),
timeoutId: ref(-1)
}
const handleMqttState = () => {
rpc4("mqtt.getMqttState").then(data => {
if(data.connected)
state.mqttConnect.value = '<cn>已连接</cn><en>connected</en>';
else
state.mqttConnect.value = '<cn>未连接</cn><en>not connected</en>';
});
setTimeout(handleMqttState,2000);
}
const checkBind = type => {
if(type) {
rpc4( "mqtt.bindOK").then(data => {
if(!data) {
state.timeoutId.value = setTimeout(()=> checkBind(type), 500);
return;
}
state.showMqttModal.value = !state.showMqttModal.value;
alertMsg('<cn>绑定成功</cn><en>Bind successfully!</en>', 'success');
});
return;
}
clearTimeout(state.timeoutId.value);
}
const bindMqtt = () => {
rpc4("mqtt.startBind").then( data => {
state.qrcodeHandler.value.innerHTML = "";
new QRCode(state.qrcodeHandler.value, "https://mqtt.linkpi.cn/wechat?sn=" + data);
state.showMqttModal.value = !state.showMqttModal.value;
} );
}
const onModalVisible = visible => {
checkBind(visible);
}
const saveRttyConf = () => {
updateRttyConf().then(()=>{
func("/system/reloadRtty");
})
}
onMounted(handleMqttState);
return {...state,mqttConf,rttyConf,updateMqttConf,saveRttyConf,bindMqtt,onModalVisible}
}
});
app.use(ignoreCustomElementPlugin);
rootfs_enc1v2_hi3520d_20240131
2024-02-15 22:07:54 +01:00
app.use(filterKeywordPlugin);
rootfs_enc1v2_hi3520d_20231130
2024-02-15 22:07:50 +01:00
app.mount('#app');
</script>
</body>
</html>