Timon/SmartCane
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[fix] Responsive menu

Browse source
This commit is contained in:
guillaume91 2024-05-27 11:59:09 +02:00
parent 8901441401
commit 70cd51379a
6 changed files with 193 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
laravel_app/app/Console/Commands/BuildReports.php
View file

@ -27,7 +27,7 @@ class BuildReports extends Command
public function handle() public function handle()
{ {
// TODO schedule all the project if mail
Project::find(1)->schedule(); Project::find(1)->schedule();
} }
} }

4
laravel_app/resources/views/components/label.blade.php
View file

@ -1,5 +1,5 @@
@props(['value']) @props(['value','disabled' => false])
<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}> <label {{ $disabled ? 'disabled' : '' }} {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700 disabled:bg-red-100']) }}>
{{ $value ?? $slot }} {{ $value ?? $slot }}
</label> </label>

12
laravel_app/resources/views/livewire/projects/menu.blade.php
View file

@ -1,8 +1,8 @@
<div class="flex flex-col w-fit bg-white p-6 rounded-lg shadow divide-y divide-solid"> <div class="flex flex-col bg-white p-6 gap-2 md:w-1/4">
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'downloads') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'downloads'])}}">Downloads</a> <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'downloads') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'downloads'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-calendar-check"></i> Downloads</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'mosaics') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}">Mosaics</a> <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mosaics') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mosaics'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-object-ungroup"></i>Mosaics</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'reports') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}">Reports</a> <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'reports') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'reports'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-flag"></i>Reports</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'mailings') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}">Mailings</a> <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'mailings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'mailings'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-envelope"></i>Mailings</a>
<a class="text-center uppercase tracking-widest font-semibold text-sm hover:bg-indigo-500 hover:text-white hover:rounded-lg hover:border-0 px-4 py-4 {{!($activeTab == 'settings') ?: 'rounded-lg bg-indigo-600 text-white border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}">Settings</a> <a class=" capitalize font-semibold text-md hover:rounded-lg hover:bg-gray-50 hover:text-indigo-600 hover:border-0 py-2 pl-2 pr-3 leading-6 whitespace-nowrap gap-2 flex items-baseline group text-gray-700 {{!($activeTab == 'settings') ?: 'rounded-lg bg-gray-50 text-indigo-600 border-0'}}" href="{{route('project.show',[$projectName,'settings'])}}"><i class="group-hover:text-indigo-600 w-4 text-gray-400 fa-regular fa-compass"></i>Settings</a>
</div> </div>
{{--TODO change to responsive menu--}} {{--TODO change to responsive menu--}}

10
laravel_app/resources/views/livewire/projects/tabs/download.blade.php
View file

@ -5,8 +5,8 @@
{{-- TODO Put Back the poll but to the list of downloads only--}} {{-- TODO Put Back the poll but to the list of downloads only--}}
> >
<div class="px-4 sm:px-6 lg:px-8"> <div class="px-4 sm:px-6 lg:px-8">
<div class="sm:flex sm:flex-col sm:items-center"> <div class="sm:flex sm:flex-col">
<div class="flex justify-between w-full my-4"> <div class="flex flex-col md:flex-row md:justify-between items-center w-full my-4">
<h1 class="text-base font-semibold leading-6 text-gray-900">Downloads</h1> <h1 class="text-base font-semibold leading-6 text-gray-900">Downloads</h1>
@if ($project->hasPendingDownload()) @if ($project->hasPendingDownload())
<p class="text-base text-gray-700 animate-pulse"> <p class="text-base text-gray-700 animate-pulse">
@ -14,10 +14,10 @@
</p> </p>
@endif @endif
</div> </div>
<div class="mt-4 sm:mt-0 sm:flex sm:justify-between w-full"> <div class="mt-4 sm:mt-0 flex flex-col sm:flex-row sm:justify-between gap-2">
<x-search></x-search> <x-search class="flex-1 w-full"></x-search>
<x-button wire:click="openDownloadModal" <x-button wire:click="openDownloadModal"
class="rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> class="rounded-md bg-indigo-600 px-3 py-2 justify-center text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
{{ __('Create Download') }} {{ __('Create Download') }}
</x-button> </x-button>
</div> </div>

49
laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
View file

@ -1,13 +1,14 @@
<div class="flex flex-col divide-y space-y-4"> <div class="flex flex-col divide-y space-y-4 m-2">
<div id="edit"> <div id="edit" class="flex flex-col md:flex-row gap-2">
<div class="flex flex-col my-2 py-2"> <div class="flex flex-col md:w-1/3">
<div class="text-xl font-bold "> <div class="text-xl font-bold ">
{{ __('Reports') }} {{ __('General') }}
</div> </div>
<div class="text-gray-500 text-md"> <div class="text-gray-500 text-md">
{{__('Report generator for generating reports')}} {{__('Manage the general settings of this project and the reports.')}}
</div> </div>
</div> </div>
<div class="md:w-2/3">
<form> <form>
<!-- Token Name --> <!-- Token Name -->
<div class="mb-2"> <div class="mb-2">
@ -56,15 +57,26 @@
</div> </div>
</form> </form>
</div> </div>
<div id-="mail" </div>
{{-- TODO change mail to something else and check schedule--}}
<div id="scheduling"
class="flex flex-col md:flex-row">
<div class="flex flex-col my-4 md:w-1/3">
<span class="text-xl font-bold dark:text-gray-300">{{__('Schedule')}}</span>
<div class="text-gray-500 text-md">
{{ __('Schedule an action for this project') }}
</div>
</div>
<div id="mail"
class="flex flex-col md:w-2/3"
x-data="{showMail: null}" x-data="{showMail: null}"
x-init="showMail = !($wire.formData['mail_subject'] === null || $wire.formData['mail_subject'] === undefined || $wire.formData['mail_subject'] === '')" x-init="showMail = !($wire.formData['mail_subject'] === null || $wire.formData['mail_subject'] === undefined || $wire.formData['mail_subject'] === '')"
class="flex flex-col"> > {{-- flex col--}}
<div class="flex justify-between my-4"> <div class="flex justify-between my-4">
<div> <div class="inline-flex items-center gap-2">
<span class="text-xl font-bold dark:text-gray-300">{{__('Mail')}}</span> {{-- <span class="text-lg font-semibold dark:text-gray-300">{{__('Mail')}}</span>---}}
<div class="text-gray-500 text-md"> <div class=" text-md font-bold">
{{ __('Schedule a mail for this Project') }} {{ __('Send a mail to recipients periodically') }}
</div> </div>
</div> </div>
<label class="inline-flex items-center cursor-pointer gap-4"> <label class="inline-flex items-center cursor-pointer gap-4">
@ -72,7 +84,8 @@ class="flex flex-col">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div> <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
</label> </label>
</div> </div>
<form submit="saveMailSettings" > <div class="flex w-full ">
<form submit="saveMailSettings">
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<x-label for="email_subject" value="{{ __('Subject') }}"/> <x-label for="email_subject" value="{{ __('Subject') }}"/>
<x-input id="email_subject" type="text" <x-input id="email_subject" type="text"
@ -94,7 +107,8 @@ class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus
</div> </div>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<x-label for="email_frequency" value="{{ __('Frequency') }}"/> <x-label for="email_frequency" value="{{ __('Frequency') }}"/>
<select id="email_frequency" class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500" <select id="email_frequency"
class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
wire:model="formData.mail_frequency" wire:model="formData.mail_frequency"
x-bind:disabled="!showMail" x-bind:disabled="!showMail"
> >
@ -121,7 +135,7 @@ class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disable
</div> </div>
<div class="divide-y divide-indigo-200 divide-dashed"> <div class="divide-y divide-indigo-200 divide-dashed">
@foreach($formData['mail_recipients'] as $key => $email_recipient) @foreach($formData['mail_recipients'] as $key => $email_recipient)
<div class="col-span-6 sm:colspan-4 grid-cols-6 gap-1 my-1 py-2 flex justify-between"> <div class="gap-1 my-1 py-2 flex flex-col md:flex-row justify-between">
<div class=""> <div class="">
<x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/> <x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
<x-input id="mail_recipient_{{ $key }}_name" type="text" <x-input id="mail_recipient_{{ $key }}_name" type="text"
@ -131,7 +145,7 @@ class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
<x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/> <x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
</div> </div>
<div class="flex-1"> <div class="">
<x-label for="bounding_box_{{ $key }}_top_left_latitude" <x-label for="bounding_box_{{ $key }}_top_left_latitude"
value="{{ __('Email') }}"/> value="{{ __('Email') }}"/>
<x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text" <x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
@ -144,8 +158,9 @@ class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
<div class="flex"> <div class="flex">
@if( count($formData['mail_recipients']) > 1) @if( count($formData['mail_recipients']) > 1)
<button <button
class="cursor-pointer text-sm text-red-500 py-3 mx-2 self-end" class="cursor-pointer text-sm text-red-500 disabled:cursor-default disabled:opacity-0 py-3 mx-2 self-end"
type="button" type="button"
x-bind:disabled="!showMail"
wire:click="deleteEmailRecipient({{ $key }})" wire:click="deleteEmailRecipient({{ $key }})"
wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}" wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
> >
@ -166,6 +181,8 @@ class="cursor-pointer text-sm text-red-500 py-3 mx-2 self-end"
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
<div class="flex justify-end items-center py-4"> <div class="flex justify-end items-center py-4">
<span> <span>
<x-action-message class="mr-3 text-indigo-500 font-semibold rounded p-2" on="saved"> <x-action-message class="mr-3 text-indigo-500 font-semibold rounded p-2" on="saved">

5
laravel_app/resources/views/projects/show.blade.php
View file

@ -4,9 +4,10 @@
{{ __('Project') }} {{ $project->name}} {{ __('Project') }} {{ $project->name}}
</h2> </h2>
</x-slot> </x-slot>
<div id="main" class="flex"> {{-- TODO search bar blinking --}}
<div id="main" class="flex flex-col md:flex-row w-full min-h-screen shadow rounded-lg overflow-hidden">
<livewire:projects.menu :project-name="$project->name" :project-id="$project->id" :active-tab="$currentTab"></livewire:projects.menu> <livewire:projects.menu :project-name="$project->name" :project-id="$project->id" :active-tab="$currentTab"></livewire:projects.menu>
<div class="flex-1 p-4 ml-2 rounded-lg bg-white shadow"> <div class="flex-1 p-4 bg-white md:w-3/4">
@switch($currentTab) @switch($currentTab)
@case('downloads') @case('downloads')
<livewire:projects.tabs.download :project="$project"></livewire:projects.tabs.download> <livewire:projects.tabs.download :project="$project"></livewire:projects.tabs.download>