Skip to content

Vue2 -> Vue3 #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iguowz wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Vue2 -> Vue3 #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8c5e47c
Update admin.html
iguowz Nov 28, 2025
f68552d
Update applelist.html
iguowz Nov 28, 2025
2ca3bde
Update base.html
iguowz Nov 28, 2025
365891a
Update group_create.html
iguowz Nov 28, 2025
0d6c8bf
Update base.html
iguowz Nov 28, 2025
e1b5c3f
Update group_manager.html
iguowz Nov 28, 2025
77e4752
Update index.html
iguowz Nov 28, 2025
2fe0b28
Update remotecontrol_android.html
iguowz Nov 28, 2025
faa82b6
Update remotecontrol_apple.html
iguowz Nov 28, 2025
add8dfa
Update upload.html
iguowz Nov 28, 2025
95431b5
Update user.html
iguowz Nov 28, 2025
d5ae9bd
Merge pull request #1 from openatx/master
iguowz May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
516 changes: 466 additions & 50 deletions templates/admin.html
View file
Open in desktop

Large diffs are not rendered by default.

317 changes: 150 additions & 167 deletions templates/applelist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,177 +59,160 @@
const currentUserName = "{{ current_user.username }}"
</script>
<script>
$.getJSON("/devices" + "?json")
.done((ret) => {
new Vue({
el: "#app",
data: Object.assign({
websocketDisconnected: false,
user: {
name: currentUserName,
email: currentUserEmail,
},
devices: [],
}, ret.data),
mounted() {
console.log("Mounted:", this.devices)
},
computed: {
tableData() {
return this.filteredDevices.map(v => {
for (const key in v.properties) {
if (v.properties.hasOwnProperty(key)) {
v['prop_' + key] = v.properties[key]
}
}
let display = v.display || {}
v['display_size'] = display.width + "x" + display.height;
return v;
})
},
filteredDevices() {
return []
// return this.devices;
return [{
udid: "123123124dsfa123423r134123",
using: false,
present: true, // present is generated by length of sources
ready: false,
private: false,
platform: "apple",
owner: "anonymous@domain.com",
group: "ntes",
address: "10.0.0.123:8100",
sources: {
"bad1-131jfla-3313131": {
name: "raspberry",
address: "10.0.1.123:8100",
priority: 2,
},
"7718231-sdljf3lkjsf-sfsdf": {
name: "wifi",
address: "10.45.16.71:7912",
priority: 1
}
},
createdAt: "2018-12-1 12:00:01",
lastUsingAt: "2018-12-1 12:00:01",
prop_displayWidth: 1080,
prop_displayHeight: 1120,
properties: {
brand: "sumsung",
model: "SM-G9209",
hwaddr: "90:b6:86:7e:7d:ff",
version: "6.0.1",
sdk: 23,
},
ip: "127.0.0.1",
display: {
height: 2560,
width: 1440,
},
}]
}
const appList = {
setup() {
const websocketDisconnected = ref(false);
const user = reactive({
name: currentUserName,
email: currentUserEmail,
});
const devices = ref([]);
const tableData = ref([]);

filters: {
formatTime(value) {
var t = moment(value)
return t.format("YYYY-M-D HH:mm:ss");
},
filters: {
formatTime(value) {
var t = moment(value)
return t.format("YYYY-M-D HH:mm:ss");
},
fromNow(value) {
return moment(value).fromNow();
fromNow(value) {
return moment(value).fromNow();
}
};
function fetchAppListDevices() {{
await axios.get("/api/v1/devices"+"?platform=apple")
.then(ret => {
devices.value = ret.data.devices;
tableData.value = tableDataList();
})
.catch(err => {
console.error(err)
})
});
function tableDataList() {
return devices.value.map(v => {
for (const key in v.properties) {
if (v.properties.hasOwnProperty(key)) {
v['prop_' + key] = v.properties[key]
}
}
},
methods: {
formatTimeUsed() {
// let duration = moment(this.finishedAt) - moment(this.createdAt);
// return moment.utc(duration).format('HH:mm:ss')
},
deviceAcquire(udid) { // for multi device acquire
return $.ajax({
method: "post",
url: "/api/v1/user/devices",
data: JSON.stringify({
"udid": udid,
}),
dataType: "json",
})
.done(ret => {
console.log(ret)
})
},
deviceRelease(udid) {
$.ajax({
method: "delete",
url: "/api/v1/user/devices/" + udid,
dataType: "json",
})
.then(ret => {
console.log(ret)
let display = v.display || {}
v['display_size'] = display.width + "x" + display.height;
return v;
})
};
watch(devices, (newVal, oldVal) => {
tableData.value = tableDataList();
},{deep: true});
mounted() {
fetchAppListDevices();

let scheme = location.protocol === 'https' ? 'wss' : 'ws';
let wsURL = scheme + "://" + location.host + "/websocket/devicechanges?platform=apple";
let ws = new WebSocket(wsURL);
ws.onopen = (evt) => {
console.log("Websocket Connected")
}
ws.onmessage = (evt) => {
let m = JSON.parse(evt.data);
switch (m.event) {
case "update":
devices.value = devices.value.map((v) => {
console.log(v.udid)
if (v.udid == m.data.udid) {
return m.data
}
return v
})
console.log("Updated:", devices.value)
break;
case "insert":
devices.value.unshift(m.data);
break;
default:
console.error("Unknown event type", m.event)
break;
}
}
ws.onclose = (evt) => {
console.log("Websocket closed")
websocketDisconnected.value = true
}
}
return {
filters,
devices,
tableData,
user,
websocketDisconnected,
}
},
methods: {
formatTimeUsed() {
// let duration = moment(this.finishedAt) - moment(this.createdAt);
// return moment.utc(duration).format('HH:mm:ss')
},
async deviceAcquire(udid) { // for multi device acquire
return await axios({
method: "post",
url: "/api/v1/user/devices",
headers: {
"Content-Type": "application/json",
},
deviceStatusName(device) {
if (!device.present) {
return "Offline"
}
if (!device.using) {
return "Use"
}
if (device.userId == currentUserEmail) {
return "Stop"
}
return "Busy"
data: JSON.stringify({
"udid": udid,
}),
})
.then(ret => {
console.log(ret.data)
})
.catch(err => {
console.error(err)
})
},
async deviceRelease(udid) {
await axios({
method: "delete",
url: "/api/v1/user/devices/" + udid,
headers: {
"Content-Type": "application/json",
},
clickStatus(event, device) {
let status = this.deviceStatusName(device)
console.log("Status", status)
switch (status) {
case "Use":
return true;
case "Stop":
this.deviceRelease(device.udid);
event.preventDefault()
return true
default:
event.preventDefault()
}
console.log(device.udid)
}
},
mounted() {
let scheme = location.protocol === 'https' ? 'wss' : 'ws';
let wsURL = scheme + "://" + location.host + "/websocket/devicechanges?platform=apple";
let ws = new WebSocket(wsURL);
ws.onopen = (evt) => {
console.log("Websocket Connected")
}
ws.onmessage = (evt) => {
let m = JSON.parse(evt.data);
switch (m.event) {
case "update":
this.devices = this.devices.map((v) => {
console.log(v.udid)
if (v.udid == m.data.udid) {
return m.data
}
return v
})
console.log("Updated:", this.devices)
break;
case "insert":
this.devices.unshift(m.data);
break;
default:
console.error("Unknown event type", m.event)
break;
}
}
ws.onclose = (evt) => {
console.log("Websocket closed")
this.websocketDisconnected = true
}
})
.then(ret => {
console.log(ret.data)
})
},
deviceStatusName(device) {
if (!device.present) {
return "Offline"
}
if (!device.using) {
return "Use"
}
})
})
if (device.userId == currentUserEmail) {
return "Stop"
}
return "Busy"
},
clickStatus(event, device) {
let status = this.deviceStatusName(device)
console.log("Status", status)
switch (status) {
case "Use":
return true;
case "Stop":
this.deviceRelease(device.udid);
event.preventDefault()
return true
default:
event.preventDefault()
}
console.log(device.udid)
}
},
};
createAppList(appList).use(ElementPlus, {
locale: ElementPlusLocaleZhCn,
}).mount("#app");

</script>
{% end %}
{% end %}
Loading