Skip to content

Commit

Permalink
Fixed room status indicators
Browse files Browse the repository at this point in the history
  • Loading branch information
@orkit
orkit committed Mar 20, 2024
1 parent d0db74a commit 29486fa
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 106 deletions.
4 changes: 2 additions & 2 deletions public/build/assets/site-b549fa6c.css → public/build/assets/site-da837060.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/build/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-v4compatibility.woff2"
},
"resources/css/site.css": {
"file": "assets/site-b549fa6c.css",
"file": "assets/site-da837060.css",
"isEntry": true,
"src": "resources/css/site.css"
},
Expand Down
185 changes: 89 additions & 96 deletions resources/views/livewire/roomstatus.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,101 @@
<div wire:poll.visible>
<!-- TL -->
<style>
.statuscontainer {
display: flex;
flex-wrap: wrap;
}
.init {
flex: 0 0 auto;
text-align: start;
/*width: 168px;*/
height: 28px;
border-radius: 5px;
margin: auto;
position: relative;
/*right: 0;*/
display: inline-block;
margin-bottom: 40px;
}
.recorder {
flex: 0 0 auto;
text-align: center;
width: 100px;
height: 42px;
margin: auto;
position: relative;
left: 0;
margin-bottom: 40px;
}
.tab {
position: absolute;
top: -20px;
left: -3px;
border-left: 1px solid blue;
border-top: 1px solid blue;
border-top-left-radius: 5px;
padding: 5px 10px;
z-index: 1;
width: 130px;
}
.recordertab {
position: absolute;
border-top: 1px solid blue;
border-right: 1px solid blue;
top: -20px;
left: -3px;
padding: 5px 10px;
z-index: 1;
}
.light {
width: 28px;
height: 28px;
border-radius: 50%;
margin: 5px;
background: black;
display: inline-block;
position: relative;
z-index: 2;
}
</style>

@foreach(\Statamic\Statamic::tag('collection:roomsstatus') as $page)
<div class="statuscontainer">
<a href="#" class="init">
<div class="tab">
<p class="mb-2 text-sm font-semibold text-blue-600">{!! $page->title !!}</p>
</div>
@if($page->projector == false && $page->recorder == false && $page->room == false)
<div class="light" data-tooltip-target="first" style="background: green"></div>
<section>
<div class="relative items-start w-full px-3 py-1 mx-auto md:px-6 lg:px-10 max-w-7xl">
<div class="grid w-full grid-cols-1 mx-auto">
@foreach(\Statamic\Statamic::tag('collection:roomsstatus') as $page)
<div class="max-w-md py-2 mx-auto">
@can('access cp')
<div class="inline-flex z-10">
<a href="{{$page->edit_url}}" >
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.1" d="m14.3 4.8 2.9 2.9M7 7H4a1 1 0 0 0-1 1v10c0 .6.4 1 1 1h11c.6 0 1-.4 1-1v-4.5m2.4-10a2 2 0 0 1 0 3l-6.8 6.8L8 14l.7-3.6 6.9-6.8a2 2 0 0 1 2.8 0Z"/>
</svg>
</a>
</div>
@endif
<p class="mb-2 text-sm font-semibold text-blue-600 dark:text-gray-200">{!! $page->title !!}</p>

<div class="inline">
<span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">OK</span>
<p class="inline-flex mb-2 text-sm font-normal dark:text-gray-200">Projector |</p>
<p class="inline-flex mb-2 text-sm font-normal dark:text-gray-200">Recorder |</p>
<p class="inline-flex mb-2 text-sm font-normal dark:text-gray-200">Room</p>
</div>

<br>
<div data-tooltip-target="first" class="inline">
@if($page->projector == true )
<span class="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">Error</span>
@elseif(!empty($page->projector_status))
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-yellow-400 border border-yellow-400">Note</span>
@else
<span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">OK</span>
@endif
</div>

<div class="inline">
@if($page->recorder == true )
<span class="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">Error</span>
@elseif(!empty($page->recorder_status))
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-yellow-400 border border-yellow-400">Note</span>
@else
<span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">OK</span>
@endif
</div>
<div class="inline">
@if($page->room == true )
<span class="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">Error</span>
@elseif(!empty($page->room_status))
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-yellow-400 border border-yellow-400">Note</span>
@else
<span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">OK</span>
@endif
</div>
@else
<div class="light" data-tooltip-target="first" style="@if($page->projector == true ) background: red @elseif(!empty($page->projector_status)) background: yellow @else background: green @endif"></div>
<div class="light" data-tooltip-target="second" style="@if($page->recorder == true ) background: red @elseif(!empty($page->recorder_status)) background: yellow @else background: green @endif"></div>
<div class="light" data-tooltip-target="third" style="@if($page->room == true ) background: red @elseif(!empty($page->room_status)) background: yellow @else background: green @endif"></div>
@endif
</a>
{{--}}
<div class="recorder">
<div class="recordertab">
<p class="mb-2 text-sm font-semibold text-blue-600">Recording</p>
</div>
<div class="mt-6">
<i class="fa-solid fa-xl fa-video-slash"></i>
</div>

@endforeach
</div> <!-- end grid -->


</div>
</section>


{{--}}
@foreach(\Statamic\Statamic::tag('collection:roomsstatus') as $page)
<div class="statuscontainer">
<a href="#" class="init">
<div class="tab">
<p class="mb-2 text-sm font-semibold text-blue-600">{!! $page->title !!}</p>
</div>
{{--}}
@can('access cp')
<div class="z-10">
<a href="{{$page->edit_url}}" >
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.1" d="m14.3 4.8 2.9 2.9M7 7H4a1 1 0 0 0-1 1v10c0 .6.4 1 1 1h11c.6 0 1-.4 1-1v-4.5m2.4-10a2 2 0 0 1 0 3l-6.8 6.8L8 14l.7-3.6 6.9-6.8a2 2 0 0 1 2.8 0Z"/>
</svg>
</a>
@if($page->projector == false && $page->recorder == false && $page->room == false)
<div class="light" data-tooltip-target="first" style="background: green"></div>
<div class="inline">
<span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">OK</span>
</div>
@else
<div class="light" data-tooltip-target="first" style="@if($page->projector == true ) background: red @elseif(!empty($page->projector_status)) background: yellow @else background: green @endif"></div>
<div class="light" data-tooltip-target="second" style="@if($page->recorder == true ) background: red @elseif(!empty($page->recorder_status)) background: yellow @else background: green @endif"></div>
<div class="light" data-tooltip-target="third" style="@if($page->room == true ) background: red @elseif(!empty($page->room_status)) background: yellow @else background: green @endif"></div>
@endif
</div>
</a>
@can('access cp')
<div class="z-10">
<a href="{{$page->edit_url}}" >
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.1" d="m14.3 4.8 2.9 2.9M7 7H4a1 1 0 0 0-1 1v10c0 .6.4 1 1 1h11c.6 0 1-.4 1-1v-4.5m2.4-10a2 2 0 0 1 0 3l-6.8 6.8L8 14l.7-3.6 6.9-6.8a2 2 0 0 1 2.8 0Z"/>
</svg>
</a>
</div>
@endif
</div>
@endforeach
{{--}}

<!-- Tooltips -->
<div id="first" role="tooltip"
Expand Down
13 changes: 7 additions & 6 deletions resources/views/navbar/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,20 @@ class="hidden md:block p-2 mr-1 text-gray-500 rounded-lg hover:text-gray-900 hov
class="hidden md:block p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
<span class="sr-only">View notifications</span>
<!-- Icon -->
<svg style="fill:gray" class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
<path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>
<svg class="w-[18px] h-[18px] text-gray-800 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M4.857 3A1.857 1.857 0 0 0 3 4.857v4.286C3 10.169 3.831 11 4.857 11h4.286A1.857 1.857 0 0 0 11 9.143V4.857A1.857 1.857 0 0 0 9.143 3H4.857Zm10 0A1.857 1.857 0 0 0 13 4.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 9.143V4.857A1.857 1.857 0 0 0 19.143 3h-4.286Zm-10 10A1.857 1.857 0 0 0 3 14.857v4.286C3 20.169 3.831 21 4.857 21h4.286A1.857 1.857 0 0 0 11 19.143v-4.286A1.857 1.857 0 0 0 9.143 13H4.857Zm10 0A1.857 1.857 0 0 0 13 14.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 19.143v-4.286A1.857 1.857 0 0 0 19.143 13h-4.286Z" clip-rule="evenodd"/>
</svg>

</button>
<!-- Dropdown menu -->
<div class="hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white rounded divide-y divide-gray-100 shadow-lg dark:bg-gray-700 dark:divide-gray-600" id="apps-dropdown">
<div class="block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<div class="block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-200">
{{__("Available e-services")}}
</div>
<div class="grid grid-cols-3 gap-4 p-4">

<a href="{{route('travel-request-create')}}" class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group">
<svg class="mx-auto mb-2 w-5 h-5 text-blue-600 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
<svg class="mx-auto mb-2 w-5 h-5 text-blue-600 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 9V4a3 3 0 0 0-6 0v5m9.92 10H2.08a1 1 0 0 1-1-1.077L2 6h14l.917 11.923A1 1 0 0 1 15.92 19Z"/>
</svg>
<div class="text-sm font-medium text-blue-600 dark:text-white">Travel Request</div>
Expand All @@ -70,7 +71,7 @@ class="hidden md:block p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg
class="hidden md:block p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
<span class="sr-only">View notifications</span>
<!-- Icon -->
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
<svg class="w-6 h-6 text-gray-800 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
</svg>
</button>
Expand All @@ -91,7 +92,7 @@ class="hidden md:block p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg
<!--FO settings -->
<a href="{{route('settings')}}" class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group">

<svg class="mx-auto mb-2 w-5 h-5 text-blue-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<svg class="mx-auto mb-2 w-5 h-5 text-blue-600 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-width="1" d="M6 4v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2m6-16v2m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v10m6-16v10m0 0a2 2 0 1 0 0 4m0-4a2 2 0 1 1 0 4m0 0v2"/>
</svg>
<div class="text-sm font-medium text-blue-600 dark:text-white">{{__("Settings")}}</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/vendor/live-search/dropdown.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</div>
<input wire:model="q" id="search" name="search"
class="w-full py-2 pl-10 pr-4 text-black bg-white border border-gray-200 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-500
sm:text-sm rounded-xl placeholder:text-gray-400 focus:border-blue-500 dark:bg-gray-900 dark:text-white" placeholder="{{__("Search")}}" type="search">
sm:text-sm rounded-xl placeholder:text-gray-400 focus:border-blue-500 dark:bg-gray-900 dark:text-gray-200" placeholder="{{__("Search")}}" type="search">

@if ($q)
<div class="origin-top-right absolute right-0 mt-2 z-20 w-72 md:w-96 rounded-md shadow-lg bg-white dark:bg-gray-800 dark:text-white ring-1 ring-black ring-opacity-5">
Expand Down

0 comments on commit 29486fa

Please sign in to comment.