platypush/platypush/backend/http/webapp/src/components/panels/Switches/SwitchWemo/Index.vue

47 lines
1.4 KiB
Vue

<template>
<div class="switches wemo-switches">
<Loading v-if="loading" />
<div class="no-content" v-else-if="!Object.keys(devices).length">No WeMo switches found.</div>
<Switch :loading="loading" :name="name" :state="device.on" @toggle="toggle(name)"
v-for="(device, name) in devices" :key="name" :has-info="true"
@info="selectedDevice = name; $refs.switchInfoModal.show()" />
<Modal title="Device Info" ref="switchInfoModal">
<div class="switch-info" v-if="selectedDevice">
<div class="row">
<div class="name">Name</div>
<div class="value" v-text="devices[selectedDevice].name" />
</div>
<div class="row">
<div class="name">On</div>
<div class="value" v-text="devices[selectedDevice].on" />
</div>
<div class="row">
<div class="name">IP</div>
<div class="value" v-text="devices[selectedDevice].ip" />
</div>
</div>
</Modal>
</div>
</template>
<script>
import Loading from "@/components/Loading";
import SwitchMixin from "@/components/panels/Switches/Mixin";
import Switch from "@/components/panels/Switches/Switch";
import Modal from "@/components/Modal";
export default {
name: "SwitchWemo",
components: {Modal, Switch, Loading},
mixins: [SwitchMixin],
}
</script>
<style lang="scss" scoped>
@import "../common";
</style>