calendar changes

mooxphp · Jun 10, 2022 · ab7fd6c · ab7fd6c
1 parent ae00f5d
commit ab7fd6c
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 27 deletions.
diff --git a/_components/tallui-dev-components/config/tallui-dev-components.php b/_components/tallui-dev-components/config/tallui-dev-components.php
@@ -1,4 +1,6 @@
 <?php
+
+use Illuminate\View\Component;
 use Usetall\TalluiDevComponents\Components;
 
 return [
@@ -17,6 +19,8 @@
     'components' => [
         'first-dev-component' => Components\Alf\FirstBladeComponent::class,
         'markdown' => Components\Alf\Markdown::class,
+        'modal' => Components\Kim\Modal::class,
+
     ],
 
     /*
@@ -31,6 +35,9 @@
 
     'livewire' => [
         'second-dev-component' => Components\Alf\FirstLivewireComponent::class,
+        'calendar' => Components\Kim\Calendar::class,
+
+
     ],
 
     /*
@@ -65,6 +72,7 @@
         'example' => [
             'https://unpkg.com/example/dist/example.min.css',
             'https://unpkg.com/example/dist/example.min.js',
+            'https://unpkg.com/[email protected]/dist/cdn.min.js',
         ],
 
     ],

diff --git a/_components/tallui-dev-components/resources/views/components/kim/calendar.blade.php b/_components/tallui-dev-components/resources/views/components/kim/calendar.blade.php
@@ -1,6 +1,11 @@
-<div>
+<div class="mt-20">
 
-    <h2 class="text-lg font-semibold text-gray-900">Upcoming meetings</h2>
+    @if ($visible)
+        <x-modal>
+
+        </x-modal>
+    @endif
+    {{-- <h2 class="text-lg font-semibold text-gray-900">Upcoming meetings</h2> --}}
     <div class="lg:grid lg:grid-cols-12 lg:gap-x-16">
         <div class="mt-10 ml-10 mr-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9">
 
@@ -44,13 +49,12 @@ class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hov
                 <div>S</div>
                 <div>S</div>
             </div>
-            <div
-                class="grid grid-cols-7 gap-px mt-2 text-sm bg-gray-200 rounded-lg shadow isolate ring-1 ring-gray-200">
+            <div class="grid grid-cols-7 gap-px mt-2 text-sm bg-gray-200 shadow isolate ring-1 ring-gray-200">
 
 
 
                 @foreach ($onemonth as $day)
-                    @if (isset($events))
+                    {{-- @if (isset($events))
                         @foreach ($events as $event)
                             @if (substr($day, 8, 10) == $event->event_start)
                                 <button type="button"
@@ -61,18 +65,12 @@ class="flex items-center justify-center mx-auto rounded-full h-7 w-7">{{ substr(
                                 @continue(2)
                             @endif
                         @endforeach
-                    @endif
+                    @endif --}}
                     @if (substr($day, 0, 3) == 'pre')
-                        <button type="button"
-                            class="rounded-tl-lg bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10">
-                            <!--
-                            Always include: "mx-auto flex h-7 w-7 items-center justify-center rounded-full"
-                            Is selected and is today, include: "bg-indigo-600"
-                            Is selected and is not today, include: "bg-gray-900"
-                            -->
-                            <time datetime="{{ substr($day, 8, 11) }}"
-                                class="flex items-center justify-center mx-auto rounded-full h-7 w-7">{{ substr($day, 16, 2) }}</time>
-                        </button>
+                                <button wire:click='setModalVisible'
+                                    class=" w-full bg-gray-50 py-1.5 text-gray-400 hover:bg-gray-100 focus:z-10">
+                                    <time datetime="{{ substr($day, 8, 11) }}"
+                                        class="flex items-center justify-center mx-auto rounded-full h-7 w-7">{{ substr($day, 16, 2) }}</time>
                     @elseif(substr($day, 8, 10) == substr($today, 0, 10))
                         <button type="button" class="bg-white py-1.5 text-gray-900 hover:bg-gray-100 focus:z-10">
                             <time datetime="{{ substr($day, 8, 11) }}"
@@ -90,7 +88,7 @@ class="flex items-center justify-center mx-auto rounded-full h-7 w-7">{{ substr(
 
             </div>
 
-            <!-- modal div -->
+            {{-- <!-- modal div -->
             <div class="" x-data="{ open: false }">
                 <!-- Button (blue), duh! -->
                 <button
@@ -159,12 +157,12 @@ class="inline-flex justify-center w-full px-4 py-2 text-black hover:text-gray-40
 
 
 
-        </div>
+        </div> --}}
 
 
-        <ol class="mt-10 text-sm leading-6 divide-y divide-gray-100 sm:mx-10 lg:col-span-7 xl:col-span-8">
+            <ol class="mt-10 text-sm leading-6 divide-y divide-gray-100 sm:mx-10 lg:col-span-7 xl:col-span-8">
 
-            @if (isset($events))
+                {{-- @if (isset($events))
                 @foreach ($events as $event)
                     <li class="relative flex py-6 space-x-6 xl:static">
                         <div class="flex-auto">
@@ -255,11 +253,11 @@ class="flex items-center p-2 -m-2 text-gray-500 rounded-full hover:text-gray-600
 
                     <!-- More meetings... -->
                 @endforeach
-            @endif
+            @endif --}}
 
-        </ol>
-    </div>
+            </ol>
+        </div>
 
 
 
-</div>
+    </div>
diff --git a/_components/tallui-dev-components/resources/views/components/kim/modal.blade.php b/_components/tallui-dev-components/resources/views/components/kim/modal.blade.php
@@ -0,0 +1,20 @@
+<div x-data="{ modal: true}">
+
+
+    <div x-show="modal" x-cloak x-transition:enter="transition ease-out duration-100 transform"
+        x-transition:enter-start="opacity-0 scale-30" x-transition:enter-end="opacity-100 scale-100"
+        x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100"
+        x-transition:leave-end="opacity-0 scale-95"
+        class="fixed top-0 bottom-0 left-0 right-0 z-50 flex items-center justify-center px-5 bg-gray-500 backdrop-blur-sm bg-opacity-70">
+        <div @click.outside="modal=false" class="overflow-hidden bg-white rounded-md shadow-sm w-96">
+            <div class="px-5 py-7">
+
+                Hi
+            </div>
+
+            <div class="grid grid-cols-2 gap-4 px-4 text-right bg-gray-100 py-7 sm:px-6">
+
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/_components/tallui-dev-components/src/Components/Kim/Calendar.php b/_components/tallui-dev-components/src/Components/Kim/Calendar.php
@@ -13,7 +13,7 @@ class Calendar extends LivewireComponent
     /** @var array */
     protected static $assets = ['example'];
 
-    public $day;
+
     public $month;
     public $year;
 
@@ -31,11 +31,13 @@ class Calendar extends LivewireComponent
     public $body;
 
 
+    public $visible;
+
     public function days()
     {
         $this->monthname = $this->getMonthName($this->month);
         $this->buildOneMonth();
-        $this->events = DB::table('events')->get();
+        // $this->events = DB::table('events')->get();
     }
 
 
@@ -184,6 +186,10 @@ public function addEvent(){
 
     }
 
+    public function setModalVisible():void
+    {
+    }
+
 
 
     public function render()

diff --git a/_components/tallui-dev-components/src/Components/Kim/Modal.php b/_components/tallui-dev-components/src/Components/Kim/Modal.php
@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Usetall\TalluiDevComponents\Components\Kim;
+
+use Usetall\TalluiAppComponents\Components\BladeComponent;
+
+
+
+class Modal extends BladeComponent
+{
+
+    /** @var array */
+    protected static $assets = ['example'];
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+
+    public function render()
+    {
+        return view('tallui-dev-components::components.kim.modal');
+    }
+
+    /**
+     * Turn Modal Visible.
+     *
+     * @return void
+     */
+    public function turnModalVisible():void
+    {
+        echo 'Hello';
+    }
+}
diff --git a/app/Http/Controllers/ShowIconController.php b/app/Http/Controllers/ShowIconController.php
@@ -17,6 +17,7 @@ public function __invoke(Icon $icon)
         ]);
     }
 
+
     public function collection()
     {
 
@@ -61,6 +62,8 @@ public function collection()
         }
     }
 
+
+
     public function doesIconAlreadyExists(string $filename): bool
     {
 

diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -3,11 +3,12 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-
+        <script src="https://cdn.tailwindcss.com"></script>
         <title>Laravel</title>
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+        <script src="//unpkg.com/alpinejs" defer></script>
 
         <!-- Styles -->
         <style>
@@ -42,7 +43,18 @@
             <!-- x-label for="bla"/ -->
             <!-- x-input name="bla"/ -->
 
+
+
+
+
             <?php // ?>
+            @livewire('calendar')
+
+
+
+
+
+
             @livewire('first-livewire-component')
 
             <!-- x-label -->
@@ -177,6 +189,8 @@
                 </div>
             </div>
         </div>
+
+
         <?php //  ?>
 
 

diff --git a/routes/web.php b/routes/web.php
@@ -18,6 +18,7 @@
 Route::view('/blade-icons', 'blade-icons.index')->name('blade-icons');
 Route::get('/blade-icons/{icon}', ShowIconController::class)->name('blade-icon');
 
+
 Route::get('/collection', [ShowIconController::class, 'collection']);
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ public function __invoke(Icon $icon) @@
             ]);
         }
         public function collection()
         {
@@ Expand Down Expand Up / @@ -61,6 +62,8 @@ public function collection() @@
             }
         }
         public function doesIconAlreadyExists(string $filename): bool
         {
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,6 +18,7 @@
		Route::view('/blade-icons', 'blade-icons.index')->name('blade-icons');
		Route::get('/blade-icons/{icon}', ShowIconController::class)->name('blade-icon');


		Route::get('/collection', [ShowIconController::class, 'collection']);


Expand Down