49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<template>
|
|
<section>
|
|
<form @submit.prevent="tryConnect">
|
|
<b-notification
|
|
type="is-danger"
|
|
aria-close-label="Close notification"
|
|
role="alert"
|
|
v-if="server.connectionError"
|
|
>
|
|
{{ server.connectionError }}
|
|
</b-notification>
|
|
<b-field label="Server address">
|
|
<b-input size="is-large" v-model="addr"></b-input>
|
|
</b-field>
|
|
<b-field>
|
|
<button type="submit" class="button is-primary">Connect</button>
|
|
</b-field>
|
|
<b-loading
|
|
is-full-page
|
|
:active.sync="server.connecting"
|
|
></b-loading>
|
|
</form>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Action, State } from "vuex-class";
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import { ServerState } from "@/store/server";
|
|
|
|
@Component({})
|
|
export default class ConnectForm extends Vue {
|
|
@State("server") private server!: ServerState;
|
|
@Action("connect", { namespace: "server" }) private connect: any;
|
|
private addr!: string;
|
|
private loading!: boolean;
|
|
|
|
private data() {
|
|
return {
|
|
addr: "http://192.168.22.22"
|
|
};
|
|
}
|
|
|
|
private async tryConnect() {
|
|
this.connect(this.addr);
|
|
}
|
|
}
|
|
</script>
|