Skip to content

Commit 424aa3a

Browse files
MaciejWasMaciejWas
committed
[#71235] frontend: Add group names to device table
1 parent 9a941ec commit 424aa3a

File tree

3 files changed

+58
-72
lines changed

3 files changed

+58
-72
lines changed

‎frontend/src/assets/table.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,16 @@
6868
}
6969
}
7070
}
71+
72+
.group-block {
73+
border: 1px solid var(--gray-400);
74+
background-color: var(--gray-100);
75+
padding: 5px;
76+
margin: 5px 5px 5px 0;
77+
display: inline-block;
78+
border-radius: 4px;
79+
80+
span.groupid {
81+
color: var(--gray-700);
82+
}
83+
}

‎frontend/src/components/devices/Device.vue‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,13 @@ Component wraps functionality for displaying and working with a single rdfm devi
3434
<p class="title">Groups</p>
3535
<p class="value">
3636
<span
37-
class="groupname"
37+
class="group-block"
3838
v-if="(device.groups || []).length > 0"
3939
v-for="group in groups"
4040
:title="group.metadata['rdfm.group.description']"
41-
>{{ group.metadata['rdfm.group.name'] }}
41+
>
42+
<span class="groupid">#{{ group.id }}</span>
43+
{{ group.metadata['rdfm.group.name'] }}
4244
</span>
4345
<span v-if="(device.groups || []).length == 0"
4446
>This device is not assigned to any group</span
@@ -106,15 +108,6 @@ Component wraps functionality for displaying and working with a single rdfm devi
106108
color: var(--gray-900);
107109
text-wrap: nowrap;
108110
}
109-
110-
.groupname {
111-
border: 1px solid var(--gray-400);
112-
border-radius: 5px;
113-
background-color: var(--gray-100);
114-
margin: 0.25em;
115-
padding: 0.25em 0.5em;
116-
display: inline-block;
117-
}
118111
}
119112
}
120113
</style>

‎frontend/src/components/devices/DevicesList.vue‎

Lines changed: 41 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,6 @@ Component wraps functionality for displaying and working with rdfm devices.
1212
<div id="devices">
1313
<TitleBar title="Devices" subtitle="manage your devices" />
1414
<div id="container">
15-
<div id="overview">
16-
<a href="#device-list-overview">Overview</a>
17-
<a href="#device-list-unregistered" v-if="pendingDevicesCount !== 0"
18-
>Unregistered</a
19-
>
20-
<a href="#device-list-registered" v-if="registeredDevicesCount !== 0">Registered</a>
21-
</div>
2215
<div id="device-list">
2316
<div id="device-list-overview">
2417
<p>Overview</p>
@@ -100,7 +93,12 @@ Component wraps functionality for displaying and working with rdfm devices.
10093
<div id="device-list-registered" v-if="registeredDevicesCount !== 0">
10194
<p>Registered</p>
10295
<div class="device-list">
103-
<div v-for="device in registeredDevices" :key="device.id" class="row">
96+
<div
97+
v-for="device in registeredDevices"
98+
:key="device.id"
99+
class="row"
100+
@click="() => router.push('/devices/' + device.id)"
101+
>
104102
<div class="entry">
105103
<div class="title">ID</div>
106104
<div class="value">#{{ device.id }}</div>
@@ -129,22 +127,22 @@ Component wraps functionality for displaying and working with rdfm devices.
129127
<div class="title">Last Accessed</div>
130128
<div class="value">{{ device.last_access }}</div>
131129
</div>
132-
<div class="entry">
130+
<div class="entry groups">
133131
<div class="title">Groups</div>
134-
<div class="value" v-if="device.groups!.length > 0">
135-
{{ device.groups }}
132+
<div class="value" v-if="!(device.groups!.length > 0)">-</div>
133+
<div class="value" v-if="groups && device.groups!.length > 0">
134+
<div
135+
class="group-block"
136+
v-for="group in device.groups!.map((devGroup) =>
137+
groups!.find((g) => g.id == devGroup),
138+
)"
139+
>
140+
<span class="groupid">#{{ group?.id }}</span>
141+
{{
142+
group?.metadata?.['rdfm.group.name'] || 'Unnamed group'
143+
}}
144+
</div>
136145
</div>
137-
<div class="value" v-else>-</div>
138-
</div>
139-
140-
<!-- Last auxiliary entry to fill up the space -->
141-
<div class="entry">
142-
<button
143-
class="action-button gray"
144-
@click="() => router.push('/devices/' + device.id)"
145-
>
146-
View
147-
</button>
148146
</div>
149147
</div>
150148
</div>
@@ -161,51 +159,22 @@ Component wraps functionality for displaying and working with rdfm devices.
161159
font-size: 1.5em;
162160
}
163161
164-
@media screen and (max-width: 1600px) {
165-
#container {
166-
display: block !important;
167-
168-
#overview {
169-
display: block !important;
170-
}
171-
172-
#device-list {
173-
width: 100% !important;
174-
}
175-
}
176-
}
177-
178162
& > #container {
179-
display: flex;
180-
flex-direction: row;
181163
color: var(--gray-1000);
182164
padding: 2em;
183165
184-
& > #overview {
185-
display: flex;
186-
flex-direction: column;
187-
gap: 1em;
188-
width: 20%;
189-
margin-right: 20px;
190-
191-
& > a {
192-
color: inherit;
193-
text-decoration: none;
194-
padding: 10px;
195-
196-
&:hover {
197-
background-color: var(--background-200);
198-
}
199-
}
200-
}
201-
202166
& > #device-list {
203-
width: 80%;
167+
width: 100%;
204168
--default-col-width: 170px;
205169
170+
#device-list-registered .row:hover {
171+
background-color: var(--gray-200);
172+
cursor: pointer;
173+
}
174+
206175
/* Default columns widths */
207176
#device-list-registered .row {
208-
grid-template-columns: 80px repeat(4, var(--default-col-width)) 300px auto auto;
177+
grid-template-columns: 80px repeat(4, var(--default-col-width)) 300px auto;
209178
}
210179
#device-list-unregistered .row {
211180
grid-template-columns: 200px 300px repeat(3, var(--default-col-width)) auto;
@@ -214,7 +183,7 @@ Component wraps functionality for displaying and working with rdfm devices.
214183
/* Smaller columns widths */
215184
@media screen and (max-width: 1670px) {
216185
#device-list-registered .row {
217-
grid-template-columns: 80px repeat(4, var(--default-col-width)) 200px auto auto;
186+
grid-template-columns: 80px repeat(4, var(--default-col-width)) 200px auto;
218187
}
219188
#device-list-unregistered .row {
220189
grid-template-columns:
@@ -244,12 +213,12 @@ Component wraps functionality for displaying and working with rdfm devices.
244213
.device-list {
245214
border: 2px solid var(--gray-400);
246215
border-radius: 5px;
247-
padding: 12px;
248216
background-color: var(--background-200);
249217
}
250218
251219
.row {
252220
display: grid;
221+
transition: 500ms;
253222
254223
&:not(:last-child) {
255224
border-bottom: 2px solid var(--gray-400);
@@ -258,15 +227,23 @@ Component wraps functionality for displaying and working with rdfm devices.
258227
.entry {
259228
padding: 0.5em 1em;
260229
230+
&:has(button) {
231+
align-content: center;
232+
}
233+
261234
.title {
262235
color: var(--gray-900);
263236
text-wrap: nowrap;
264237
}
265238
266239
.value {
267-
max-height: 100px;
240+
max-height: 400px;
268241
text-overflow: ellipsis;
269242
overflow: hidden;
243+
244+
&:not(:has(.group-block)) {
245+
padding-top: 10px;
246+
}
270247
}
271248
272249
button {
@@ -285,6 +262,7 @@ import { computed, onMounted, onUnmounted } from 'vue';
285262
import { useNotifications, POLL_INTERVAL } from '../../common/utils';
286263
import TitleBar from '../TitleBar.vue';
287264
import {
265+
groupResources,
288266
pendingDevicesResources,
289267
registerDeviceRequest,
290268
registeredDevicesResources,
@@ -314,6 +292,7 @@ export default {
314292
const fetchResources = async () => {
315293
await registeredDevicesResources.fetchResources();
316294
await pendingDevicesResources.fetchResources();
295+
await groupResources.fetchResources();
317296
};
318297
319298
onMounted(async () => {
@@ -343,6 +322,7 @@ export default {
343322
return {
344323
pendingDevices: pendingDevicesResources.resources,
345324
registeredDevices: registeredDevicesResources.resources,
325+
groups: groupResources.resources,
346326
router,
347327
pendingDevicesCount,
348328
registeredDevicesCount,

0 commit comments

Comments
 (0)