Did something that looks like some design or something

This commit is contained in:
Pünkösd Marcell 2021-06-12 22:40:30 +02:00
parent bac428238d
commit 7db5b3b76f
4 changed files with 110 additions and 15873 deletions

15891
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,26 @@
<template>
<b-overlay :show="false" rounded="sm">
<b-card
title="All devices"
tag="all-devices"
class="m-2"
>
<b-card-text>
Control all devices
</b-card-text>
<b-button variant="success" class="mr-1">Bring online</b-button>
<b-button variant="danger" class="mr-1">Bring offline</b-button>
</b-card>
</b-overlay>
</template>
<script>
export default {
name: "GlobalDeviceBuzgerator"
}
</script>
<style scoped>
</style>

View File

@ -0,0 +1,36 @@
<template>
<b-overlay :show="false" rounded="sm">
<b-card
:title="cardTitle"
class="m-2"
>
<b-card-text>
Could not read device data!
</b-card-text>
<b-button variant="success" class="mr-1">Bring online</b-button>
<b-button variant="danger" class="mr-1">Bring offline</b-button>
<b-button variant="warning" class="mr-1">Manual alert</b-button>
</b-card>
</b-overlay>
</template>
<script>
export default {
name: "SingleDeviceBuzgerator",
props: {
'device_id': {
type: String
}
},
computed: {
cardTitle() {
return `Device: ${this.device_id}`
}
}
}
</script>
<style scoped>
</style>

View File

@ -1,11 +1,39 @@
<template> <template>
<div class="devices"> <div class="devices">
<b-row>
<b-col>
<global-device-buzgerator/>
</b-col>
</b-row>
<b-row>
<b-col v-for="device in devices" :key="device" cols="12" md="6">
<single-device-buzgerator :device_id="device"/>
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>
import SingleDeviceBuzgerator from "../components/SingleDeviceBuzgerator";
import GlobalDeviceBuzgerator from "../components/GlobalDeviceBuzgerator";
export default { export default {
name: "Devices" name: "Devices",
data() {
return {
devices: [
'1'
]
}
},
components: {
SingleDeviceBuzgerator, GlobalDeviceBuzgerator
}
,
comments: {
GlobalDeviceBuzgerator,
SingleDeviceBuzgerator
}
} }
</script> </script>