<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>
