peterstockings/cardio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change look of device list

Browse Source
This commit is contained in:
Peter Stockings
2023-01-24 23:52:05 +11:00
parent b25f57e103
commit e7087aedbb
1 changed files with 37 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
templates/devices.html
View File

@@ -1,29 +1,39 @@
<div class="flex justify-center">
<div class="relative overflow-x-auto">
<table class="lg:w-1/4 sm:w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Name
</th>
<th scope="col" class="px-6 py-3">
Status
</th>
</tr>
</thead>
<tbody>
<div class="w-full max-w-screen-xl mx-auto p-6">
<div class="relative overflow-hidden mb-8 bg-white">
<div class="p-4 bg-grey-lighter py-8">
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
<div class="sm:flex sm:items-center px-2 py-4">
<div class="flex-grow">
<h3 class="font-normal px-2 py-3 leading-tight">Devices</h3>
<div class="w-full">
{% for d in devices %}
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 cursor-pointer"
hx-get="{{ url_for('device', device_id=d['id']) }}" hx-push-url="true" hx-target="#container">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{{d['name']}}
</th>
<td class="px-6 py-4">
{{d['is_active']}}
</td>
</tr>
<div class="flex cursor-pointer my-1 hover:bg-blue-lightest rounded"
hx-get="{{ url_for('device', device_id=d['id']) }}" hx-push-url="true"
hx-target="#container">
<div class="w-8 h-10 text-center py-1">
<p
class="text-3xl p-0 {{ 'text-green-dark' if d['is_active']=='yes' else 'text-grey-dark'}}">
&bull;</p>
</div>
<div class="w-4/5 h-10 py-3 px-1">
<p class="hover:text-blue-dark">{{d['name']}}</p>
</div>
<div class="w-1/5 h-10 text-right p-3">
<p class="text-sm text-grey-dark">0</p>
</div>
</div>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<div class="sm:flex bg-grey-light sm:items-center px-2 py-4">
<div class="flex-grow text-right">
<button class="bg-blue hover:bg-blue-dark text-white py-2 px-4 rounded">
Add New
</button>
</div>
</div>
</div>
</div>
</div>
</div>