[WIP] Refactor project

This commit is contained in:
Ludovic CANDELLIER
2021-05-21 00:21:05 +02:00
parent f4ab8e71a8
commit 64abc46d99
347 changed files with 14104 additions and 1608 deletions

View File

@@ -0,0 +1,17 @@
<div class="row">
<div class="col-md-6">
@include('boilerplate::plugins.demo.select2')
@include('boilerplate::plugins.demo.datepicker')
@include('boilerplate::plugins.demo.icheck')
@include('boilerplate::plugins.demo.codemirror')
@include('boilerplate::plugins.demo.fileinput')
@include('boilerplate::plugins.demo.tabs')
</div>
<div class="col-md-6">
@include('boilerplate::plugins.demo.tinymce')
@include('boilerplate::plugins.demo.datatables')
@include('boilerplate::plugins.demo.bootbox')
@include('boilerplate::plugins.demo.notify')
@include('boilerplate::plugins.demo.fullcalendar')
</div>
</div>

View File

@@ -0,0 +1,15 @@
@component('boilerplate::card', ['color' => 'pink', 'title' => 'Bootbox'])
<p><button class="btn btn-primary" onclick="bootbox.alert('Example')">bootbox.alert</button></p>
<pre class="prettyprint">bootbox.alert('Example')</pre>
<p><button class="btn btn-primary" onclick="bootbox.confirm('OK', function(result){ console.log('Result: ' + result); });">bootbox.confirm</button></p>
<pre class="prettyprint">bootbox.confirm("OK ?", function(result){ console.log('Result: ' + result); });</pre>
<p><button class="btn btn-primary" onclick="bootbox.prompt('Value', function(result){ console.log(result); });">bootbox.prompt</button></p>
<pre class="prettyprint">bootbox.prompt("Value", function(result){ console.log(result); });</pre>
<p><button class="btn btn-primary" onclick="bootbox.dialog({ message: '<h1>HTML message</h1><p>Hello there !</p>'})">bootbox.dialog</button></p>
<pre class="prettyprint">bootbox.dialog({ message: '&lt;h1>HTML message&lt;/h1>&lt;p>Hello there !&lt;/p>' });</pre>
@slot('footer')
<div class="small text-muted text-right">
<a href="http://bootboxjs.com/documentation.html" target="_blank">bootbox</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,39 @@
@include('boilerplate::load.codemirror', ['theme' => 'storm'])
@push('js')
<script>
$(function () {
$('#code').codemirror();
})
</script>
@endpush
@component('boilerplate::card', ['color' => 'warning', 'title' => 'CodeMirror'])
Usage :
<pre>
&commat;include('boilerplate::load.codemirror', ['theme' => 'storm'])
&commat;push('js')
&lt;script>
var myCode = $('#code').codemirror();
// To get the value : myCode.getValue();
&lt;/script>
&commat;endpush</pre>
<textarea id="code"><h1>CodeMirror demo</h1>
<style>
.color {
color: red;
}
</style>
<script>
$(function () {
alert('demo');
});
</script>
</textarea>
@slot('footer')
<div class="small text-muted text-right">
<a href="https://codemirror.net/" target="_blank">CodeMirror</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,64 @@
@include('boilerplate::load.datatables')
@push('js')
<script>
$(function() {
$('#dt').dataTable({
columns : [
null,
null,
{ render: function(data) { return moment(data).format('YYYY-MM-DD hh:mm') } }
]
});
});
</script>
@endpush
@component('boilerplate::card', ['color' => 'orange', 'title' => 'Datatables'])
Usage :
<pre class="mb-3">
&commat;include('boilerplate::load.datatables')
&commat;push('js')
&lt;script>
$('#dt').dataTable();
&lt;/script>
&commat;endpush</pre>
<table class="table table-sm table-striped table-hover" id="dt">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orlo Bashirian</td>
<td>qWaelchi@hotmail.com</td>
<td>2017-03-01 13:12</td>
</tr>
<tr>
<td>Martina Armstrong</td>
<td>Hertha92@yahoo.com</td>
<td>2016-06-08 14:16</td>
</tr>
<tr>
<td>Mandy Legros</td>
<td>Kirsten68@gmail.com</td>
<td>2017-08-15 12:10</td>
</tr>
<tr>
<td>Anne Franecki</td>
<td>Iva.shoen@hayley.com</td>
<td>2017-08-15 12:15</td>
</tr>
</tbody>
</table>
@slot('footer')
<div class="small text-muted text-right">
<a href="https://datatables.net/manual/index">datatables</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,115 @@
@include('boilerplate::load.datepicker')
@push('js')
<script>
$(function() {
// Date range picker
$('#reservation').daterangepicker();
// Date range picker with time picker
$('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 15, timePicker24Hour: true, format: 'MM/DD/YYYY hh:mm A'});
// Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges: {
"Today": [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 days': [moment().subtract(6, 'days'), moment()],
'Last 30 days': [moment().subtract(29, 'days'), moment()],
'This month': [moment().startOf('month'), moment().endOf('month')],
'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
// Date picker
$('.datepicker').datetimepicker({
format: 'L'
});
$('.datetimepicker').datetimepicker();
});
</script>
@endpush
@component('boilerplate::card', ['color' => 'indigo', 'title' => 'Date picker'])
Usage
<pre>
&commat;include('boilerplate::load.datepicker')
&commat;push('js')
&lt;script>
$('.datepicker').datetimepicker({ format: "L" });
$('.datetimepicker').datetimepicker();
$('.daterangepicker').daterangepicker();
&lt;/script>
&commat;endpush</pre>
<!-- Date -->
<div class="form-group">
<label>Date</label>
<div class="input-group date">
<div class="input-group-append">
<div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
</div>
<input type="text" class="form-control datepicker" id="datepicker" data-toggle="datetimepicker" data-target="#datepicker">
</div>
</div>
<!-- Datetime -->
<div class="form-group">
<label>Datetime</label>
<div class="input-group date">
<div class="input-group-append">
<div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
</div>
<input type="text" class="form-control pull-right datetimepicker" id="datetimepicker" data-toggle="datetimepicker" data-target="#datetimepicker">
</div>
</div>
<!-- Date range -->
<div class="form-group">
<label>Date range</label>
<div class="input-group">
<div class="input-group-append">
<div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
</div>
<input type="text" class="form-control pull-right" id="reservation">
</div>
</div>
<!-- Date and time range -->
<div class="form-group">
<label>Date and time range</label>
<div class="input-group">
<div class="input-group-append">
<div class="input-group-text"><i class="far fa-clock"></i></div>
</div>
<input type="text" class="form-control pull-right" id="reservationtime">
</div>
</div>
<!-- Date and time range -->
<div class="form-group">
<label>Date range button</label>
<div class="input-group">
<button type="button" class="btn btn-default pull-right" id="daterange-btn">
<span>
<i class="far fa-calendar-alt mr-2"></i>Date range picker
</span>
<i class="fa fa-caret-down"></i>
</button>
</div>
</div>
@slot('footer')
<div class="small text-muted text-right">
<a href="https://tempusdominus.github.io/bootstrap-4/" target="_blank">Tempus Dominus</a> /
<a href="https://www.daterangepicker.com" target="_blank">Date Range Picker</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,24 @@
@include('boilerplate::load.fileinput')
@push('js')
<script>
$('#files').fileinput()
</script>
@endpush
@component('boilerplate::card', ['color' => 'primary', 'title' => 'Fileinput'])
Usage :
<pre>
&commat;include('boilerplate::load.fileinput')
&commat;push('js')
&lt;script>
$('#files').fileinput()
&lt;/script>
&commat;endpush</pre>
<input id="files" name="files" type="file" class="file" multiple>
@slot('footer')
<div class="text-muted small text-right">
<a href="https://plugins.krajee.com/file-input" target="_blank">bootstrap-fileinput</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,39 @@
@include('boilerplate::load.fullcalendar')
@push('js')
<script>
$('#calendar').fullCalendar({
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
buttonIcons: false,
navLinks: true,
editable: true,
dayMaxEvents: true,
events: 'https://fullcalendar.io/demo-events.json?overload-day'
})
</script>
@endpush
@component('boilerplate::card', ['color' => 'success', 'title' => 'FullCalendar'])
Usage :
<pre>
&commat;include('boilerplate::load.fullcalendar')
&commat;push('js')
&lt;script>
var calendar = $('#calendar').fullCalendar({
buttonIcons: false,
});
&lt;/script>
&commat;endpush</pre>
<div id='calendar'></div>
@slot('footer')
<div class="text-muted small text-right">
<a href="https://fullcalendar.io" target="_blank">FullCalendar</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,144 @@
@component('boilerplate::card', ['color' => 'success', 'title' => 'iCheck Bootstrap'])
<div class="row mb-3">
<div class="col-12">
Usage :
<pre>
&lt;div class="icheck-primary d-inline">
&lt;input type="checkbox" id="checkboxPrimary1">
&lt;label for="checkboxPrimary1">&lt;/label>
&lt;/div></pre>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary1" checked>
<label for="checkboxPrimary1">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary2">
<label for="checkboxPrimary2">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="checkbox" id="checkboxPrimary3" disabled>
<label for="checkboxPrimary3">
Primary checkbox
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked>
<label for="radioPrimary1">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1">
<label for="radioPrimary2">
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary3" name="r1" disabled>
<label for="radioPrimary3">
Primary radio
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-danger d-inline">
<input type="checkbox" checked id="checkboxDanger1">
<label for="checkboxDanger1">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="checkbox" id="checkboxDanger2">
<label for="checkboxDanger2">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="checkbox" disabled id="checkboxDanger3">
<label for="checkboxDanger3">
Danger checkbox
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-danger d-inline">
<input type="radio" name="r2" checked id="radioDanger1">
<label for="radioDanger1">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="radio" name="r2" id="radioDanger2">
<label for="radioDanger2">
</label>
</div>
<div class="icheck-danger d-inline">
<input type="radio" name="r2" disabled id="radioDanger3">
<label for="radioDanger3">
Danger radio
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-success d-inline">
<input type="checkbox" checked id="checkboxSuccess1">
<label for="checkboxSuccess1">
</label>
</div>
<div class="icheck-success d-inline">
<input type="checkbox" id="checkboxSuccess2">
<label for="checkboxSuccess2">
</label>
</div>
<div class="icheck-success d-inline">
<input type="checkbox" disabled id="checkboxSuccess3">
<label for="checkboxSuccess3">
Success checkbox
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-success d-inline">
<input type="radio" name="r3" checked id="radioSuccess1">
<label for="radioSuccess1">
</label>
</div>
<div class="icheck-success d-inline">
<input type="radio" name="r3" id="radioSuccess2">
<label for="radioSuccess2">
</label>
</div>
<div class="icheck-success d-inline">
<input type="radio" name="r3" disabled id="radioSuccess3">
<label for="radioSuccess3">
Success radio
</label>
</div>
</div>
</div>
</div>
@slot('footer')
<div class="text-right small text-muted">
<a href="https://bantikyan.github.io/icheck-bootstrap/">iCheck Bootstrap</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,23 @@
@component('boilerplate::card', ['color' => 'danger', 'title' => 'Toastr / Growl'])
Usage :
<pre>
&lt;button class="btn btn-primary" onclick="growl('Example')">growl&lt;/button>
</pre>
<p><button class="btn btn-primary" onclick="growl('Example')">growl</button></p>
<pre class="prettyprint">growl('Example')</pre>
<p>
<button class="btn btn-info" onclick="growl('Example', 'info')">growl info</button>
<button class="btn btn-success" onclick="growl('Example', 'success')">growl success</button>
<button class="btn btn-warning" onclick="growl('Example', 'warning')">growl warning</button>
<button class="btn btn-danger" onclick="growl('Example', 'error')">growl error</button>
</p>
<pre class="prettyprint">growl('Example', 'success')</pre>
@slot('footer')
<div class="small text-muted text-right">
<a href="https://codeseven.github.io/toastr/">Toastr</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,81 @@
@include('boilerplate::load.select2')
@push('js')
<script>
$(function() {
$(".select2").select2();
});
</script>
@endpush
@component('boilerplate::card', ['color' => 'primary', 'title' => 'Select 2'])
<div class="row">
<div class="col-12">
Usage :
<pre>
&commat;include('boilerplate::load.select2')
&commat;push('js')
&lt;script>
$('.select2').select2();
&lt;/script>
&commat;endpush</pre>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Minimal</label>
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
<div class="form-group">
<label>Disabled</label>
<select class="form-control select2" disabled="disabled" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label>
<select class="form-control select2" multiple="multiple" data-placeholder="Multiple select" style="width: 100%;">
<option>Alabama</option>
<option>Alaska</option>
<option>California</option>
<option selected>Delaware</option>
<option>Tennessee</option>
<option selected>Texas</option>
<option>Washington</option>
</select>
</div>
<div class="form-group">
<label>Disabled Result</label>
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option disabled="disabled">California (disabled)</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
</div>
</div>
@slot('footer')
<div class="small text-muted text-right">
<a href="https://select2.github.io/">select2</a>
</div>
@endslot
@endcomponent

View File

@@ -0,0 +1,26 @@
@component('boilerplate::card', ['tabs' => true])
@slot('header')
<ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1-tab" data-toggle="pill" href="#tab1" role="tab" aria-controls="custom-tabs-two-home" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2-tab" data-toggle="pill" href="#tab2" role="tab" aria-controls="custom-tabs-two-profile" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab3-tab" data-toggle="pill" href="#tab3" role="tab" aria-controls="custom-tabs-two-messages" aria-selected="false">Tab 3</a>
</li>
</ul>
@endslot
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
</div>
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
</div>
</div>
@endcomponent

View File

@@ -0,0 +1,16 @@
@component('boilerplate::card', ['color' => 'info', 'title' => 'TinyMCE'])
Usage :
<pre>
&commat;include('boilerplate::load.tinymce')
&commat;push('js')
&lt;script>
$('#tiny').tinymce({});
&lt;/script>
&commat;endpush</pre>
@component('boilerplate::tinymce') @endcomponent
@slot('footer')
<div class="text-muted small text-right">
<a href="https://www.tiny.cloud/docs/" target="_blank">tinyMCE</a>
</div>
@endslot
@endcomponent