dustin
/
hudctrl
1
0
Fork 0
Code Releases Activity

ui: Add navigation field 

The GUI now allows controlling the location of the screens by entering a
new URL in the text field.  Upon submitting the form, the card will
refresh with the updated screen information and screenshot.
master
Dustin 2022-04-30 21:49:30 -05:00
parent 12d6337335
commit 3c5ee6fa00
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
ui/src/App.vue
View File

@ -42,7 +42,22 @@
<v-btn @click="refresh(name)" text> <v-btn @click="refresh(name)" text>
<span>Reload Page</span> <span>Reload Page</span>
</v-btn> </v-btn>
<v-btn @click="screen._showurl = true" text>
<span>Navigate</span>
</v-btn>
</v-card-actions> </v-card-actions>
<v-expand-transition>
<v-card-actions v-if="screen._showurl === true">
<v-text-field
v-model="screen.new_url"
append-icon="mdi-arrow-right"
@click:append="navigate(name)"
/>
</v-card-actions>
</v-expand-transition>
<v-overlay v-if="screen.loading" absolute>
<v-progress-circular indeterminate />
</v-overlay>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -59,6 +74,9 @@ interface Screen {
title: string; title: string;
url: string; url: string;
screenshot: string; screenshot: string;
_showurl: boolean;
new_url: string;
loading: boolean;
} }
interface Screens { interface Screens {
@ -76,6 +94,9 @@ export default class App extends Vue {
for (const [name, screen] of Object.entries(screens)) { for (const [name, screen] of Object.entries(screens)) {
const ts = new Date().getTime(); const ts = new Date().getTime();
screen.screenshot = `/api/screen/${name}/screenshot?${ts}`; screen.screenshot = `/api/screen/${name}/screenshot?${ts}`;
screen._showurl = false;
screen.new_url = screen.url;
screen.loading = false;
} }
this.screens = screens; this.screens = screens;
} }
@ -83,16 +104,41 @@ export default class App extends Vue {
async refresh_ss(name: string) { async refresh_ss(name: string) {
const screen = this.screens[name]; const screen = this.screens[name];
const res = await fetch(`/api/screen/${name}/`);
const data = await res.json();
screen.url = data.url;
screen.title = data.title;
const base = screen.screenshot.split("?")[0]; const base = screen.screenshot.split("?")[0];
const ts = new Date().getTime(); const ts = new Date().getTime();
screen.screenshot = `${base}?${ts}`; screen.screenshot = `${base}?${ts}`;
} }
async refresh(name: string) { async refresh(name: string) {
const screen = this.screens[name];
screen.loading = true;
const res = await fetch(`/api/screen/${name}/refresh`, { method: "POST" }); const res = await fetch(`/api/screen/${name}/refresh`, { method: "POST" });
if (res.ok) { if (res.ok) {
await this.refresh_ss(name); await this.refresh_ss(name);
} }
screen.loading = false;
}
async show_urlbar(screen: Screen) {
screen.new_url = screen.url;
screen._showurl = true;
}
async navigate(name: string) {
const screen = this.screens[name];
screen.loading = true;
const form = new FormData();
form.append("url", screen.new_url);
await fetch(`/api/screen/${name}/navigate`, {
method: "POST",
body: form,
});
await this.refresh_ss(name);
screen.loading = false;
} }
} }
</script> </script>