feat: refactor buttons
This commit is contained in:
Liyas Thomas
GitHub
@@ -16,19 +16,18 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!validUrl"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
!connectionState ? "sync" : "sync_disabled"
|
||||
}}</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ connectionState ? $t("disconnect") : $t("connect") }}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
!connectionState ? "sync" : "sync_disabled"
|
||||
}}</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -64,18 +63,17 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="publish" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="publish"
|
||||
class="button"
|
||||
name="get"
|
||||
:disabled="!canpublish"
|
||||
@click="publish"
|
||||
>
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="publish"
|
||||
/>
|
||||
{{ $t("mqtt_publish") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -93,24 +91,21 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="subscribe" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="subscribe"
|
||||
name="get"
|
||||
:disabled="!cansubscribe"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleSubscription"
|
||||
>
|
||||
{{
|
||||
subscriptionState
|
||||
? $t("mqtt_unsubscribe")
|
||||
: $t("mqtt_subscribe")
|
||||
}}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
subscriptionState ? "sync_disabled" : "sync"
|
||||
}}</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleSubscription"
|
||||
/>
|
||||
{{
|
||||
subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe")
|
||||
}}
|
||||
<span>
|
||||
<i class="material-icons">{{
|
||||
subscriptionState ? "sync_disabled" : "sync"
|
||||
}}</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -29,20 +29,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
name="connect"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -99,39 +98,35 @@
|
||||
</li>
|
||||
<div v-if="index + 1 !== communication.inputs.length">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="removeCommunicationInput({ index })"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="removeCommunicationInput({ index })"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
<div v-if="index + 1 === communication.inputs.length">
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
class="button"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
@click="sendMessage"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addCommunicationInput">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addCommunicationInput" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
|
||||
@@ -17,20 +17,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="start" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="start"
|
||||
:disabled="!serverValid"
|
||||
name="start"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="toggleSSEConnection"
|
||||
>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleSSEConnection"
|
||||
/>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
@@ -18,20 +18,19 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="connect"
|
||||
:disabled="!urlValid"
|
||||
class="button"
|
||||
name="connect"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="toggleConnection"
|
||||
/>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
@@ -66,7 +65,7 @@
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="{
|
||||
content: protocol.hasOwnProperty('active')
|
||||
@@ -75,44 +74,39 @@
|
||||
: $t('turn_on')
|
||||
: $t('turn_off'),
|
||||
}"
|
||||
class="icon button"
|
||||
@click="
|
||||
@click.native="
|
||||
protocol.active = protocol.hasOwnProperty('active')
|
||||
? !protocol.active
|
||||
: false
|
||||
"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
protocol.hasOwnProperty("active")
|
||||
? protocol.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</button>
|
||||
/>
|
||||
<i class="material-icons">
|
||||
{{
|
||||
protocol.hasOwnProperty("active")
|
||||
? protocol.active
|
||||
? "check_box"
|
||||
: "check_box_outline_blank"
|
||||
: "check_box"
|
||||
}}
|
||||
</i>
|
||||
</li>
|
||||
</div>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
class="icon button"
|
||||
@click="deleteProtocol({ index })"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
@click.native="deleteProtocol({ index })"
|
||||
/>
|
||||
<i class="material-icons">delete</i>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon button" @click="addProtocol">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
<ButtonSecondary @click.native="addProtocol" />
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</AppSection>
|
||||
@@ -141,18 +135,17 @@
|
||||
<div>
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
<ButtonSecondary
|
||||
id="send"
|
||||
name="send"
|
||||
:disabled="!connectionState"
|
||||
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
|
||||
@click="sendMessage"
|
||||
>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
@click.native="sendMessage"
|
||||
/>
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user