add signature , datepicker wip

Signed-off-by: Dieter Coopman <dieter@deltasolutions.be>

Author: dietercoopman

README.md

@@ -17,6 +17,7 @@ composer require lloadout/components
 - [Blade Ui Kit](https://github.com/blade-ui-kit)
 - [Apex charts](https://apexcharts.com/)
 - [Select 2](https://select2.org/)
+- [Signature pad](https://github.com/szimek/signature_pad)
 
 ## Extra LLoadout components
 
@@ -75,4 +76,10 @@ For the stacked barchart you can use the same tag as for the simple barchart , i
 #### Linechart
     <x-load-linechart title="Provide a title" key="delayed-{{ now() }}" :data="[10,20,70]" :labels="['a']"></x-load-linechart>
 
+### Signature 
+
+This signature component will create a textfield in your html , in that textfield a base64 encoded png stream will be stored.
+
+    <x-load-signature name="my-signature" width="400" height="400" background="white" color="black" />
+
 

resources/assets/js/signature.js

@@ -0,0 +1,30 @@
+function signPad() {
+    return {
+        signature: '',
+        jpeg: '',
+        draw(width = 500, height = 400, background = 'white', color = 'black') {
+            var canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            canvas.style.zIndex = 8;
+            canvas.style.background = background;
+            canvas.style.position = "absolute";
+            canvas.style.border = "1px solid #C0C0C0";
+            canvas.position = "relative";
+
+            this.signature = new SignaturePad(canvas);
+            this.signature.minWidth = 2;
+            this.signature.maxWidth = 2;
+            this.signature.penColor = color;
+            this.signature.onEnd = () => this.save();
+
+            this.$el.appendChild(canvas);
+        },
+        save() {
+            this.jpeg = this.signature.toDataURL("image/png");
+        },
+        clear() {
+            this.signature.clear();
+        }
+    }
+}

resources/views/blade/forms/daterange.blade.php

@@ -0,0 +1 @@
+<input {{ $attributes->merge(['class' => 'daterangepicker'])}} type="text" />

resources/views/blade/signature/signature.blade.php

@@ -0,0 +1,2 @@
+<livewire:signature :name="$name" :width="$width" :height="$height" :background="$background" :color="$color">
+</livewire:signature>

resources/views/livewire/signature/signature.blade.php

@@ -0,0 +1,9 @@
+<div x-data="signPad()" x-init="draw(@this.width,@this.height,@this.background,@this.color)"
+     style="position: relative;height: {{ $height + 30}}px; width:{{ $width }}px">
+    <button x-on:click="clear()" style="display:block;position: relative; top:37px; left:7px; z-index: 100;background: #ff6961; padding:4px;border-radius:4px">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="height: 20px; color:white">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        </svg>
+    </button>
+    <input type="hidden" name="{{ $name }}" x-bind:value="jpeg" />
+</div>

src/Http/Livewire/Signature.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace LLoadoutComponents\Http\Livewire;
+
+use Livewire\Component;
+
+class Signature extends Component
+{
+    public $width;
+    public $height;
+    public $background;
+    public $name;
+    public $color;
+
+    public function mount($width, $height, $background, $name, $color)
+    {
+        $this->width      = $width;
+        $this->height     = $height;
+        $this->background = $background;
+        $this->name       = $name;
+        $this->color      = $color;
+    }
+
+    public function render()
+    {
+        return view('load::livewire.signature.signature');
+    }
+}

src/LLoadoutComponents.php

@@ -11,16 +11,28 @@ public static function outputScripts(): string
     {
 
         $scripts = [
-            "charts" => [
+            "charts"    => [
                 '<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>',
                 '<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>',
                 '<script>function drawBarChart(e,t,a,n,r){if(a);else;var i,o={title:{text:n,align:"left",margin:10,offsetX:0,offsetY:0,floating:!1,style:{fontSize:"14px",fontWeight:"bold",fontFamily:void 0,color:"#263238"}},chart:{type:"bar",toolbar:{export:{csv:{filename:n+".csv",columnDelimiter:";",headerCategory:"category",headerValue:"value",dateFormatter:e=>new Date(e).toDateString()},svg:{filename:n+".svg"},png:{filename:n+".png"}}}},series:t,xaxis:{categories:e,labels:{show:!0,rotate:-45}},dataLabels:{enabled:!1},plotOptions:{bar:{horizontal:a,dataLabels:{position:"top"}}},grid:{show:!0,xaxis:{lines:{show:!0}},yaxis:{lines:{show:!0}}}},l=document.getElementById("bar-chart-"+r);l.innerHTML="",(i=document.createElement("div")).id="chart-"+r,l.appendChild(i),(i=new ApexCharts(document.getElementById("chart-"+r),o)).render()}function drawPieChart(e,t,a,n){var r,i={title:{text:a,align:"left",margin:10,offsetX:0,offsetY:0,floating:!1,style:{fontSize:"14px",fontWeight:"bold",fontFamily:void 0,color:"#263238"}},series:t,chart:{type:"pie"},labels:e,responsive:[{breakpoint:480,options:{chart:{width:200},legend:{position:"bottom"}}}]},o=document.getElementById("pie-chart-"+n);o.innerHTML="",(r=document.createElement("div")).id="chart-"+n,o.appendChild(r),(r=new ApexCharts(document.getElementById("chart-"+n),i)).render()}function drawLineChart(e,t,a,n){var r,i={series:[{data:t}],chart:{height:350,type:"line",zoom:{enabled:!1}},dataLabels:{enabled:!1},stroke:{curve:"straight"},title:{text:"Product Trends by Month",align:"left"},grid:{row:{colors:["#f3f3f3","transparent"],opacity:.5}},xaxis:{categories:e}},o=document.getElementById("line-chart-"+n);o.innerHTML="",(r=document.createElement("div")).id="chart-"+n,o.appendChild(r),(r=new ApexCharts(document.getElementById("chart-"+n),i)).render()}</script>'
             ],
-            "select" => [
+            "select"    => [
                 '<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />',
                 '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>',
                 '<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>',
                 '<script>$(".searchable").select2();</script>'
+            ],
+            "daterange" => [
+                '<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>',
+                '<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>',
+                '<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>',
+                '<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />',
+                '<script>$(".daterangepicker").daterangepicker();</script>'
+            ],
+            "signature" => [
+                '<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>',
+                '<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>',
+                '<script>function signPad(){return{signature:"",jpeg:"",draw(t=500,e=400,i="white",s="black"){var a=document.createElement("canvas");a.width=t,a.height=e,a.style.zIndex=8,a.style.background=i,a.style.position="absolute",a.style.border="1px solid #C0C0C0",a.position="relative",this.signature=new SignaturePad(a),this.signature.minWidth=2,this.signature.maxWidth=2,this.signature.penColor=s,this.signature.onEnd=(()=>this.save()),this.$el.appendChild(a)},save(){this.jpeg=this.signature.toDataURL("image/png")},clear(){this.signature.clear()}}}</script>'
             ]
         ];
 

src/LLoadoutComponentsServiceProvider.php

@@ -7,6 +7,7 @@
 use LLoadoutComponents\Http\Livewire\BarChart;
 use LLoadoutComponents\Http\Livewire\LineChart;
 use LLoadoutComponents\Http\Livewire\PieChart;
+use LLoadoutComponents\Http\Livewire\Signature;
 
 
 class LLoadoutComponentsServiceProvider extends ServiceProvider
@@ -33,6 +34,8 @@ protected function bootBladeComponents()
             Blade::component('load::blade.charts.piechart', "load-piechart");
             Blade::component('load::blade.charts.linechart', "load-linechart");
             Blade::component('load::blade.forms.select', "load-select");
+            Blade::component('load::blade.forms.daterange', "load-daterange");
+            Blade::component('load::blade.signature.signature', "load-signature");
         });
     }
 
@@ -41,6 +44,7 @@ protected function bootLivewireComponents()
         Livewire::component('barchart', BarChart::class);
         Livewire::component('piechart', PieChart::class);
         Livewire::component('linechart', LineChart::class);
+        Livewire::component('signature', Signature::class);
     }
 
     private function bootDirectives(): void