Add component for inputting the websocket URL
This commit is contained in:
parent
31a8315590
commit
1b9ba8ef8d
1 changed files with 51 additions and 0 deletions
51
src/components/WebsocketURL.vue
Normal file
51
src/components/WebsocketURL.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div id="websocket_entry">
|
||||
<h2>
|
||||
Enter a websocket URL:
|
||||
</h2>
|
||||
<input
|
||||
type="text"
|
||||
name="Websocket URL"
|
||||
v-model="ws_url"
|
||||
@keyup.enter="submit_ws_url()"
|
||||
>
|
||||
<br>
|
||||
<button
|
||||
@onclick.stop="submit_ws_url()"
|
||||
>
|
||||
Confirm URL
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WebsocketEntry',
|
||||
components: {},
|
||||
data() {return {
|
||||
ws_url: ``,
|
||||
}},
|
||||
methods: {
|
||||
submit_ws_url() {
|
||||
if (this.ws_url.length > 0 && this.ws_url.match(/^wss?:\/\//)) {
|
||||
this.$emit(`set-ws-url`, this.ws_url);
|
||||
} else {
|
||||
alert(`Invalid websocket URL, it must begin with "wss://" in order to connect.`)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
#websocket_entry {
|
||||
text-align: center
|
||||
height: 100vh
|
||||
width: 33vw
|
||||
margin: 0 auto
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 90vw
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue