Commit d7407903 by Bayu Hendra Winata

integrate laravolt/etalase

parent e05ea6a1
<?php
namespace App\Console\Commands;
use Illuminate\Console\Command;
class TestCommand extends Command
{
/**
* The name and signature of the console command.
*
* @var string
*/
protected $signature = 'command:name';
/**
* The console command description.
*
* @var string
*/
protected $description = 'Command description';
/**
* Create a new command instance.
*
* @return void
*/
public function __construct()
{
parent::__construct();
}
/**
* Execute the console command.
*
* @return mixed
*/
public function handle()
{
//
}
}
......@@ -3,6 +3,7 @@
namespace App\Exceptions;
use Exception;
use Illuminate\Auth\AuthenticationException;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
class Handler extends ExceptionHandler
......@@ -48,4 +49,12 @@ class Handler extends ExceptionHandler
{
return parent::render($request, $exception);
}
protected function unauthenticated($request, AuthenticationException $exception)
{
return $request->expectsJson()
? response()->json(['message' => $exception->getMessage()], 401)
: redirect()->guest(route('auth::login'));
}
}
......@@ -3,6 +3,7 @@
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
use Laravolt\Ui\FlashMiddleware;
class Kernel extends HttpKernel
{
......@@ -35,6 +36,7 @@ class Kernel extends HttpKernel
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
FlashMiddleware::class,
],
'api' => [
......
......@@ -23,6 +23,18 @@ class AppServiceProvider extends ServiceProvider
*/
public function register()
{
// $section = $this->app['laravolt.menu']->add('Sample Menu A');
// $menu = $section->add('Menu', '#')->data('icon', 'circle outline');
// foreach(range(1, 10) as $i) {
// $menu->add('Submenu '.$i, '#');
// }
//
// $section = $this->app['laravolt.menu']->add('Sample Menu B');
// foreach(range(1, 8) as $h) {
// $menu = $section->add('Menu '.$h, '#')->data('icon', 'circle outline');
// foreach(range(1, 4) as $i) {
// $menu->add('Submenu '.$i, '#');
// }
// }
}
}
......@@ -3,27 +3,9 @@
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Laravolt\Epicentrum\Models\User as Authenticatable;
class User extends Authenticatable
{
use Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'password',
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password', 'remember_token',
];
}
......@@ -18,7 +18,13 @@
"fideloper/proxy": "^4.0",
"laravel/framework": "5.6.*",
"laravel/tinker": "^1.0",
"laravolt/auth": "dev-master"
"laravolt/acl": "dev-master",
"laravolt/auth": "dev-master",
"laravolt/epicentrum": "dev-master",
"laravolt/password": "dev-master",
"laravolt/semantic-form": "dev-master",
"laravolt/suitable": "dev-master",
"laravolt/ui": "dev-master"
},
"require-dev": {
"filp/whoops": "^2.0",
......@@ -38,6 +44,7 @@
},
"autoload-dev": {
"psr-4": {
"Laravolt\\Etalase\\": "packages/laravolt/etalase/src",
"Tests\\": "tests/"
}
},
......
......@@ -150,6 +150,7 @@ return [
/*
* Package Service Providers...
*/
\Laravolt\Etalase\ServiceProvider::class,
/*
* Application Service Providers...
......
<div class="example">
<div class="example__title">
<h2 class="ui header">{!! $title !!}</h2>
<div class="ui buttons mini">
<button class="ui button icon button--code"><i class="icon code"></i></button>
<button class="ui button icon button--copy" data-position="bottom right" data-content="Copied to clipboard" data-inverted="" data-variation="mini inverted"><i class="icon copy"></i></button>
</div>
</div>
<div class="example__code">
<pre><code class="html">{{ $content }}</code></pre>
</div>
<div class="example__preview">
{!! $content !!}
</div>
</div>
@extends('etalase::layout')
@section('content-inner')
@etalase('Breadcrumb')
<div class="ui segment basic secondary">
<div class="ui breadcrumb">
<a class="section">Home</a>
<div class="divider"> / </div>
<a class="section">Settings</a>
<div class="divider"> / </div>
<div class="active section">Theme</div>
</div>
</div>
@endetalase
<div class="ui message info">
<p>Letakkan tag breadcrumb di atas tepat di bawah <code>content__body</code> di base layout.</p>
</div>
@endsection
@extends('etalase::layout')
@section('content-inner')
@etalase('Button')
<button class="ui button primary">Primary Button</button>
<button class="ui button">Default Button</button>
@endetalase
<div class="ui message info">
<p>Usahakan dalam satu halaman hanya ada satu
<button class="ui button primary mini">Primary Button</button>
.
</p>
</div>
<div class="ui divider hidden section"></div>
@etalase('Form Button')
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<button class="ui button primary">Simpan</button>
<button class="ui button">Batal</button>
</form>
@endetalase
<div class="ui divider hidden section"></div>
@etalase('Form Button (Boxed)')
<form class="ui form segment very padded">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<button class="ui button primary">Simpan</button>
<button class="ui button">Batal</button>
</form>
@endetalase
<div class="ui message info">
<p>Posisi tombol dalam sebuah form adalah di <strong>kiri bawah</strong>.</p>
</div>
<div class="ui divider hidden section"></div>
<h3 class="ui header dividing">Referensi</h3>
<div class="ui list">
<a href="http://www.lukew.com/ff/entry.asp?571" class="item" target="_blank">http://www.lukew.com/ff/entry.asp?571
<i class="icon external"></i></a>
</div>
@endsection
@extends('etalase::layout')
@section('content-inner')
@etalase('Dashboard')
<div class="ui grid four column stackable celled">
<div class="column center aligned middle aligned">
<div class="ui statistic red">
<div class="label">
Pegawai
</div>
<div class="value">
45
</div>
<div class="label">
<i class="icon triangle up green"></i><span class="green text">12%</span>
</div>
</div>
</div>
<div class="column center aligned middle aligned">
<div class="ui statistic orange">
<div class="label">
Total Proyek
</div>
<div class="value">
98
</div>
<div class="label">
<i class="icon triangle down red"></i><span class="red text">-5%</span>
</div>
</div>
</div>
<div class="column center aligned middle aligned">
<div class="ui statistic yellow">
<div class="label">
Total Omzet
</div>
<div class="value">
9.1 M
</div>
<div class="label">
<i class="icon triangle down red"></i><span class="red text">-10%</span>
</div>
</div>
</div>
<div class="column center aligned middle aligned">
<div class="ui statistic teal">
<div class="label">
Klien
</div>
<div class="value">
27
</div>
<div class="label">
<i class="icon triangle up green"></i><span class="green text">-17%</span>
</div>
</div>
</div>
</div>
<div class="ui grid four column stackable">
<div class="column">
<div class="ui segment inverted red center aligned">
<div class="ui statistic inverted">
<div class="value">
45
</div>
<div class="label">
Pegawai
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui segment inverted orange center aligned">
<div class="ui statistic inverted">
<div class="value">
98
</div>
<div class="label">
Total Proyek
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui segment inverted yellow center aligned">
<div class="ui statistic inverted">
<div class="value">
9.1 M
</div>
<div class="label">
Total Omzet
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui segment inverted teal center aligned">
<div class="ui statistic inverted">
<div class="value">
27
</div>
<div class="label">
Klien
</div>
</div>
</div>
</div>
</div>
<div class="ui grid stackable">
<div class="ten wide column">
<div class="ui segment padded top attached">
<h3 class="ui header">Top 10 Performer</h3>
<div id="chart-top-performer" style="height: 300px;"></div>
</div>
<div class="ui segment bottom attached" style="padding: 0">
<div class="ui grid four column stackable internally celled" style="margin:0">
<div class="column center aligned middle aligned">
<div class="ui statistic red">
<div class="value">
45
</div>
<div class="label">
Pegawai
</div>
</div>
</div>
<div class="column center aligned middle aligned">
<div class="ui statistic orange">
<div class="value">
98
</div>
<div class="label">
Total Proyek
</div>
</div>
</div>
<div class="column center aligned middle aligned">
<div class="ui statistic yellow">
<div class="value">
9M
</div>
<div class="label">
Total Omzet
</div>
</div>
</div>
<div class="column center aligned middle aligned">
<div class="ui statistic teal">
<div class="value">
27
</div>
<div class="label">
Klien
</div>
</div>
</div>
</div>
</div>
</div>
<div class="six wide column">
<div class="ui segment">
<h3 class="ui header">Project State</h3>
<!-- HTML -->
<div id="chart-pie" style="margin: auto; max-width: 360px;"></div>
<div id="chart-pie-legend" style="max-width: 360px; margin: auto;"></div>
</div>
</div>
</div>
@endetalase
@endsection
@push('head')
<link rel="stylesheet" href="{{ asset('lib/graf/grafs.css') }}">
@endpush
@push('body')
<script src="{{ asset('lib/graf/grafs.js') }}"></script>
<!-- JS -->
<script>
var data = {
labels: ['Ardin', 'Bayu', 'Citra', 'Dani', 'Eko', 'Fitrop', 'Ginanjar', 'Hendra', 'Indra', 'Joko'],
data: [130, 98, 92, 80, 80, 77, 67, 65, 63, 50],
colors: ['#DB2828']
};
var options = {shadow: false};
var line = new Grafs.Bar('#chart-top-performer', data, options);
</script>
<!-- JS -->
<script>
var data = {
labels: ["Active", "Maintenance", "Closed"],
data: [8, 3, 16],
colors: ['#96d759', '#ff8c42', '#ff4053']
};
var options = {
shadow: false,
legend: {
target: '#chart-pie-legend'
}
};
var pie = new Grafs.Pie('#chart-pie', data, options);
</script>
@endpush
@extends('etalase::layout')
@section('content-inner')
@etalase('Control Panel')
<div class="ui cards four item">
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon users big red"></i>
<h3 class="ui header">User Management</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon circle thin big orange"></i>
<h3 class="ui header">Content Management System</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon square outline big yellow"></i>
<h3 class="ui header">App 1</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon flag big olive"></i>
<h3 class="ui header">App 2</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon options big green"></i>
<h3 class="ui header">Preferences</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon database big teal"></i>
<h3 class="ui header">Database</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon file big blue"></i>
<h3 class="ui header">File Manager</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned very padded">
<i class="ui icon settings big purple"></i>
<h3 class="ui header">Settings</h3>
</div>
</div>
</a>
</div>
@endetalase
@endsection
@extends('etalase::layout')
@section('content-inner')
@etalase('Summary Board')
<div class="ui celled grid">
<div class="row">
<div class="six wide column">
<div class="ui segment basic">
<h4 class="ui header centered block">Goals</h4>
<ul class="ui list">
<li>Membuat sistem pengkajian yang membantu perawat dan dokter dalam penanganan pasien</li>
</ul>
</div>
<div class="ui segment basic">
<h4 class="ui header centered block">Stakeholders</h4>
<ul class="ui list relaxed">
<li class="item">
<strong>Bu Intan (Praktisi Keperawatan dari UGM)</strong> sebagai praktisi dan knowledge source
</li>
<li class="item"><strong>Wiley (penerbit internasional)</strong> sebagai pemegang lisensi NANDA
</li>
</ul>
</div>
</div>
<div class="five wide column">
<div class="ui segment basic">
<h4 class="ui header centered block">Issues/Risks</h4>
<ul class="ui list">
<li>Belum pernah requirement secara langsung dengan user</li>
<li>Non-CRUD, secara teknis cukup menantang</li>
<li>Pengurusan lisensi melibatkan pihak asing, tidak bisa cepat</li>
</ul>
</div>
</div>
<div class="five wide column">
<div class="ui segment basic">
<h4 class="ui header centered block">Action Plan</h4>
<ul class="ui list">
<li>-</li>
<li>Assign senior programmer</li>
<li>-</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="six wide column">
<h4 class="ui header centered block attached top">Line Up</h4>
<table class="ui table striped attached bottom padded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="http://a4.dev/img/bayu.jpg" class="ui image avatar">
Bayu Hendra Winata
</td>
<td>Manager</td>
</tr>
<tr>
<td>
<img src="http://a4.dev/img/sugihartono.png" class="ui image avatar">
Sugihartono
</td>
<td>Analyst</td>
</tr>
<tr>
<td>
<img src="http://a4.dev/img/dani.jpg" class="ui image avatar">
Dani Ramadani
</td>
<td>Programmer</td>
</tr>
<tr>
<td>
<img src="http://a4.dev/img/akbar.jpg" class="ui image avatar">
Akbar Adhatama
</td>
<td>Programmer</td>
</tr>
</tbody>
</table>
</div>
<div class="ten wide column">
<h4 class="ui header centered block attached top">Schedule</h4>
<table class="ui table attached bottom very compact">
<thead>
<tr>
<th class="left aligned">Agenda</th>
<th class="right aligned" style="width: 100px">Fixtures</th>
<th class="left aligned" style="width: 100px">Results</th>
</tr>
</thead>
<tbody>
<tr class="disabled">
<td><i class="icon soccer"></i> Kick Off</td>
<td class="right aligned">
<div class="ui label basic">22 Dec '15</div>
</td>
<td>
<div class="ui label red">12 Jan '16</div>
</td>
</tr>
<tr class="disabled">
<td>Requirement 1</td>
<td></td>
<td>
<div class="ui label">12 Jan</div>
</td>
</tr>
<tr class="disabled">
<td>Review 1</td>
<td></td>
<td>
<div class="ui label">12 Jan</div>
</td>
</tr>
<tr class="warning">
<td>Launching 1</td>
<td class="right aligned">
<div class="ui label basic">W4 Februari</div>
</td>
<td></td>
</tr>
<tr class="">
<td>Beta testing di RS UGM</td>
<td class="right aligned">
<div class="ui label basic">Mar-Jul</div>
</td>
<td></td>
</tr>
<tr>
<td>Demo di depan Presiden NANDA</td>
<td class="right aligned">
<div class="ui label basic">Agustus</div>
</td>
<td></td>
</tr>
<tr>
<td><i class="icon flag checkered"></i> Final Whistle</td>
<td class="right aligned"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@endetalase
@endsection
@extends('etalase::layout')
@section('content-inner')
@etalase('Data Definition')
<table class="ui table definition">
<tr><td>Name</td><td>Jon Dodo</td></tr>
<tr><td>Position</td><td>Web Developer</td></tr>
<tr><td>Department</td><td>Software Development</td></tr>
<tr><td>Join Date</td><td>1 February 2001</td></tr>
<tr>
<td>Skills</td>
<td>
<div class="ui label">Laravel</div>
<div class="ui label">Grails</div>
<div class="ui label">Node JS</div>
<div class="ui label">Angular</div>
<div class="ui label">Vue</div>
</td>
</tr>
</table>
@endetalase
<div class="ui divider hidden section"></div>
@etalase('Card Definition')
<div class="ui card">
<div class="image">
<img src="{{ asset('img/avatar.jpg') }}">
</div>
<div class="extra p-0">
<table class="ui table definition b-0">
<tr><td>Name</td><td>Jon Dodo</td></tr>
<tr><td>Position</td><td>Web Developer</td></tr>
<tr><td>Department</td><td>Software Development</td></tr>
<tr><td>Join Date</td><td>1 February 2001</td></tr>
</table>
</div>
</div>
@endetalase
@endsection
@extends('etalase::layout')
@section('content-inner')
<div class="ui segment basic center aligned">
<h2 class="ui header horizontal divider">Flash Message</h2>
</div>
<a name="basic"></a>
@etalase('Dark', 'etalase::example.flash.dark')
@endsection
@push('body')
<script>
$(function(){
$(document).on('click', '.ui.button.flash--success', function(){
Messenger({}).post({"message":"Success bro, good job!","type":"success"});
});
$(document).on('click', '.ui.button.flash--error', function(){
Messenger({}).post({"message":"Opps, error bro!","type":"error"});
});
$(document).on('click', '.ui.button.flash--info', function(){
Messenger({}).post({"message":"Woro-woro!","type":"info"});
});
});
</script>
@endpush
<button class="ui button flash--success"><i class="icon circle green"></i>Success</button>
<button class="ui button flash--info"><i class="icon circle blue"></i>Info</button>
<button class="ui button flash--error"><i class="icon circle red"></i>Error</button>
<script>
// Taruh kode dibawah di layout global
// Messenger.options = {
// extraClasses: 'messenger-fixed messenger-on-top animated',
// theme: 'dark' // or 'light' if you wish
// };
// Tampilkan pesan
//Messenger({}).post({"message":"Success bro, good job!","type":"success"});
//Messenger({}).post({"message":"Opps, error bro!","type":"error"});
//Messenger({}).post({"message":"Woro-woro!","type":"info"});
</script>
@extends('etalase::layout')
@section('page.title', 'Form')
@section('content-inner')
{{--<div class="ui segment basic center aligned">--}}
{{--<h2 class="ui header horizontal divider">Form</h2>--}}
{{--<div class="ui list">--}}
{{--<a href="#basic" class="item">Basic</a>--}}
{{--<a href="#advance" class="item">Advance</a>--}}
{{--<a href="#error" class="item">Error Message</a>--}}
{{--<a href="#datepicker" class="item">Datepicker</a>--}}
{{--</div>--}}
{{--</div>--}}
<div class="ui grid stackable two column">
<div class="column">
<div class="ui segment blue padded">
@etalase('Quick Example', 'etalase::example.form.quick')
</div>
<div class="ui segment green padded">
@etalase('Different Size', 'etalase::example.form.size')
</div>
<div class="ui segment orange padded">
@etalase('Input Addon', 'etalase::example.form.input')
</div>
</div>
<div class="column">
<div class="ui segment purple padded">
@etalase('Horizontal Form', 'etalase::example.form.horizontal')
</div>
<div class="ui segment red padded">
@etalase('Different Width', 'etalase::example.form.width')
</div>
<div class="ui segment yellow padded">
@etalase('General Elements', 'etalase::example.form.general')
</div>
<div class="ui segment yellow padded">
@etalase('Datepicker', 'etalase::example.form.calendar')
</div>
</div>
</div>
{{--<a name="advance"></a>--}}
{{--@etalase('Advance Form', 'etalase::example.form.advance')--}}
{{--<a name="datepicker"></a>--}}
{{--@etalase('Datepicker', 'etalase::example.form.calendar')--}}
{{--<a name="error-message"></a>--}}
{{--@etalase('Error State', 'etalase::example.form.error')--}}
@endsection
<form class="ui form">
<h4 class="ui dividing header">Shipping Information</h4>
<div class="field">
<label>Name</label>
<div class="two fields">
<div class="field">
<input type="text" name="shipping[first-name]" placeholder="First Name">
</div>
<div class="field">
<input type="text" name="shipping[last-name]" placeholder="Last Name">
</div>
</div>
</div>
<div class="field">
<label>Billing Address</label>
<div class="fields">
<div class="twelve wide field">
<input type="text" name="shipping[address]" placeholder="Street Address">
</div>
<div class="four wide field">
<input type="text" name="shipping[address-2]" placeholder="Apt #">
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>State</label>
<select class="ui fluid dropdown search">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AL">San Fransisco</option>
</select>
</div>
<div class="field">
<label>Country</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
<div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
</div>
</div>
</div>
</div>
<h4 class="ui dividing header">Billing Information</h4>
<div class="field">
<label>Card Type</label>
<div class="ui selection dropdown">
<input type="hidden" name="card[type]">
<div class="default text">Type</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="visa">
<i class="visa icon"></i>
Visa
</div>
<div class="item" data-value="amex">
<i class="amex icon"></i>
American Express
</div>
<div class="item" data-value="discover">
<i class="discover icon"></i>
Discover
</div>
</div>
</div>
</div>
<div class="fields">
<div class="seven wide field">
<label>Card Number</label>
<input type="text" name="card[number]" maxlength="16" placeholder="Card #">
</div>
<div class="three wide field">
<label>CVC</label>
<input type="text" name="card[cvc]" maxlength="3" placeholder="CVC">
</div>
<div class="six wide field">
<label>Expiration</label>
<div class="two fields">
<div class="field">
<select class="ui fluid search dropdown" name="card[expire-month]">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="field">
<input type="text" name="card[expire-year]" maxlength="4" placeholder="Year">
</div>
</div>
</div>
</div>
<button type="submit" class="ui button primary" tabindex="0">Submit Order</button>
<a class="ui button">Cancel</a>
</form>
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field">
<label>Nationality</label>
<select class="ui dropdown search">
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Thailand</option>
</select>
</div>
<div class="field">
<label>Hobby</label>
<div class="inline fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hobby[]">
<label>Coding</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hobby[]">
<label>Gaming</label>
</div>
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="field">
<div class="ui checkbox radio">
<input type="radio" name="gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui checkbox radio">
<input type="radio" name="gender">
<label>Female</label>
</div>
</div>
</div>
<div class="field">
<label>Do you have any feedback for us?</label>
<textarea rows="5"></textarea>
</div>
<div class="ui divider hidden"></div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<div class="ui divider hidden"></div>
<button class="ui button primary" type="submit">Submit</button>
<a class="ui button">Cancel</a>
</form>
<div class="ui calendar" data-format="YYYY-MM-DD">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text">
</div>
</div>
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" value="Jon Dodo">
</div>
<div class="field error">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field error">
<label>Nationality</label>
<select class="ui dropdown search">
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Thailand</option>
</select>
</div>
<button class="ui button primary" type="submit">Submit</button>
<a class="ui button">Cancel</a>
</form>
<form action="" class="ui form">
<div class="field">
<label for="">Text</label>
<input type="text">
</div>
<div class="field disabled">
<label for="">Text Disabled</label>
<input type="text" disabled>
</div>
<div class="field">
<label for="">Textarea</label>
<textarea name="" id="" cols="30" rows="3"></textarea>
</div>
<div class="field disabled">
<label for="">Textarea Disabled</label>
<textarea name="" id="" cols="30" rows="3" disabled></textarea>
</div>
<div class="field error">
<label>Input with error</label>
<input type="text" name="first-name" value="Jon Dodo">
</div>
<div class="field">
<label>Hobby</label>
<div class="inline fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hobby[]">
<label>Coding</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="hobby[]">
<label>Gaming</label>
</div>
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="field">
<div class="ui checkbox radio">
<input type="radio" name="gender">
<label>Male</label>
</div>
</div>
<div class="field">
<div class="ui checkbox radio">
<input type="radio" name="gender">
<label>Female</label>
</div>
</div>
</div>
<div class="field">
<label>Select</label>
<select class="ui dropdown search">
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Thailand</option>
</select>
</div>
<div class="field disabled">
<label>Select Disabled</label>
<select class="ui dropdown search" disabled>
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Thailand</option>
</select>
</div>
<div class="field">
<label>Multiple Select</label>
<select class="ui dropdown search" multiple>
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Thailand</option>
</select>
</div>
</form>
<div class="ui form">
<div class="inline fields">
<label class="field four wide column">Email</label>
<div class="field twelve wide column">
<input type="text" placeholder="Email">
</div>
</div>
<div class="inline fields">
<label class="field four wide column">Password</label>
<div class="field twelve wide column">
<input type="text" placeholder="Password">
</div>
</div>
<div class="inline fields">
<label class="field four wide column"></label>
<div class="field twelve wide column">
<div class="ui checkbox">
<input type="checkbox">
<label>Remember Me</label>
</div>
</div>
</div>
<div class="inline fields">
<label class="field four wide column"></label>
<div class="field twelve wide column">
<button class="ui button primary" type="submit">Sign In</button>
</div>
</div>
</div>
<form class="ui form">
<div class="field">
{!! SemanticForm::input('username')->placeholder('Username')->prependLabel('@') !!}
</div>
<div class="field">
{!! SemanticForm::input('username')->placeholder('Username')->appendLabel('.00', 'basic') !!}
</div>
<div class="field">
{!! SemanticForm::input('username')->placeholder('Username')->prependLabel('$', 'basic')->appendLabel('.00') !!}
</div>
<div class="field">
{!! SemanticForm::input('username')->placeholder('Email')->prependIcon('mail') !!}
</div>
<div class="field">
{!! SemanticForm::input('username')->placeholder('')->appendIcon('check') !!}
</div>
<div class="field">
{!! SemanticForm::input('username')->placeholder('')->appendIcon('check', 'green') !!}
</div>
<div class="field">
<div class="ui icon input loading">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
<div class="field">
<div class="ui right labeled input">
<input type="text" placeholder="Find domain">
<div class="ui dropdown label">
<div class="text">.com</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">.com</div>
<div class="item">.net</div>
<div class="item">.org</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="ui action input">
<input type="text" placeholder="Search...">
<select class="ui compact selection dropdown">
<option value="all">All</option>
<option selected="" value="articles">Articles</option>
<option value="products">Products</option>
</select>
<div type="submit" class="ui button">Search</div>
</div>
</div>
</form>
<form class="ui form">
<div class="field">
<label>Email address</label>
<input type="text" name="email" placeholder="Enter email">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password" placeholder="Password">
</div>
<div class="field">
<label>File input</label>
<input type="file">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<div class="field">
<button class="ui button primary" type="submit">Submit</button>
</div>
</form>
<form class="ui form mini">
<div class="field">
<input type="text" name="email" placeholder="mini">
</div>
</form>
<div class="ui divider hidden"></div>
<form class="ui form tiny">
<div class="field">
<input type="text" name="email" placeholder="tiny">
</div>
</form>
<div class="ui divider hidden"></div>
<form class="ui form small">
<div class="field">
<input type="text" name="email" placeholder="small">
</div>
</form>
<div class="ui divider hidden"></div>
<form class="ui form">
<div class="field">
<input type="text" name="email" placeholder="default">
</div>
</form>
<div class="ui divider hidden"></div>
<form class="ui form large">
<div class="field">
<input type="text" name="email" placeholder="large">
</div>
</form>
<div class="ui divider hidden"></div>
<form class="ui form big">
<div class="field">
<input type="text" name="email" placeholder="big">
</div>
</form>
<div class="ui divider hidden"></div>
<form class="ui form huge">
<div class="field">
<input type="text" name="email" placeholder="huge">
</div>
</form>
<div class="ui divider hidden"></div>
<form class="ui form massive">
<div class="field">
<input type="text" name="email" placeholder="massive">
</div>
</form>
<form class="ui form">
<div class="fields">
<div class="field">
<input type="text" name="email" placeholder="equal width">
</div>
<div class="field">
<input type="text" name="email" placeholder="equal width">
</div>
<div class="field">
<input type="text" name="email" placeholder="equal width">
</div>
</div>
<div class="fields">
<div class="three wide field">
<input type="text" name="email" placeholder="three wide">
</div>
<div class="four wide field">
<input type="text" name="email" placeholder="four wide">
</div>
<div class="nine wide field">
<input type="text" name="email" placeholder="nine wide">
</div>
</div>
</form>
@extends('etalase::layout')
@section('page.title', 'Inbox')
@section('content-inner')
<div class="ui grid stackable">
<div class="column four wide">
<div class="ui vertical menu">
<a class="active item">
<div class="ui small label">19</div>
<i class="icon inbox"></i>
Inbox
</a>
<a class="item">
<div class="ui small label">1</div>
<i class="icon star yellow"></i>
Starred
</a>
<a class="item">
<div class="ui small label">5</div>
<i class="icon bookmark"></i>
Important
</a>
<a class="item">
<div class="ui small label">12</div>
<i class="icon mail"></i>
Sent Mail
</a>
<a class="item">
<div class="ui small label">51</div>
<i class="icon ban"></i>
Spam
</a>
</div>
<div class="ui vertical menu">
<div class="item"><h4 class="ui header">Filter by label:</h4></div>
<a class="item">
<div class="ui red empty circular label"></div>
Important
</a>
<a class="item">
<div class="ui teal empty circular label"></div>
Work
</a>
<a class="item">
<div class="ui blue empty circular label"></div>
Interesting
</a>
<a class="item">
<div class="ui orange empty circular label"></div>
Discussion
</a>
</div>
</div>
<div class="column twelve wide">
<div class="ui segment top attached">
<form action="" class="ui form">
<div class="field">
<div class="ui icon input transparent">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
</form>
</div>
<div class="ui segment attached secondary">
<div class="ui checkbox" data-toggle="checkall" data-selector=".checkbox[data-type='check-all-child']">
<input type="checkbox">
</div>
<div class="ui buttons small">
<div class="ui button icon" data-tooltip="Archive" data-inverted="true"><i class="icon archive"></i></div>
<div class="ui button icon" data-tooltip="Label" data-inverted="true"><i class="icon tag"></i></div>
<div class="ui button icon" data-tooltip="Move to trash" data-inverted="true"><i class="icon trash"></i></div>
</div>
<button class="ui button primary right floated"><i class="icon plus"></i> Compose</button>
</div>
<table class="ui table attached single line fixed">
@foreach(range(1, 23) as $i => $item)
<tr>
<td width="60">
<div class="ui checkbox" data-type="check-all-child">
<input type="checkbox" name="_ids[]" value="{{ $i }}">
</div>
<i class="icon star {{ $faker->randomElement(['empty', 'yellow']) }}"></i>
</td>
<td width="120"><strong>{{ $faker->name }}</strong></td>
<td>
@if($i % 4 == 0)
<div class="ui label red mini">Important</div>
@endif
@if($i % 3 == 0)
<div class="ui label red teal mini">Work</div>
@endif
{{ $faker->paragraph(3) }}
</td>
<td width="70">{{ $faker->date('j M') }}</td>
</tr>
@endforeach
</tbody>
</table>
<div class="ui menu bottom attached">
<div class="item borderless">
<small>Menampilkan 1-9 dari total 9</small>
</div>
<ul class="menu attached right bottom">
<div class="item disabled"><i class="icon angle left"></i></div>
<a class="item active">1</a>
<a class="item">2</a>
<a class="item"><i class="icon angle right"></i></a>
</ul>
</div>
</div>
</div>
@endsection
@extends('etalase::layout')
@section('content-inner')
@etalase('Application Launcher')
<div class="ui cards four item">
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/inaproc.png" alt="" class="ui image tiny">
<h3 class="ui header">INAPROC</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/portalintranet.jpg" alt="" class="ui image tiny">
<h3 class="ui header">Portal Intranet</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/k_smart_report.png" alt="" class="ui image tiny">
<h3 class="ui header">Smart Report</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/monev-trans.png" alt="" class="ui image tiny">
<h3 class="ui header">Monev</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/icon-e-proc.png" alt="" class="ui image tiny">
<h3 class="ui header">Portal Eproc</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/18-Agustus-2016---Ikon-Logo-SiULP-Revisi-1.png" alt="" class="ui image tiny">
<h3 class="ui header">SIULP</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/b2g.png" alt="" class="ui image tiny">
<h3 class="ui header">B2G</h3>
</div>
</div>
</a>
<a href="" class="card">
<div class="content">
<div class="ui segment basic center aligned padded">
<img src="http://www.lkpp.go.id/v3/files/apps/k_adp.png" alt="" class="ui image tiny">
<h3 class="ui header">ADP</h3>
</div>
</div>
</a>
</div>
@endetalase
@endsection
@extends('ui::layouts.app')
@section('content')
<div class="ui container">
<div class="ui message">Standard content</div>
</div>
<div class="ui divider hidden section"></div>
<div class="ui segment secondary attached very padded">
Full width content
</div>
<div class="ui divider hidden section"></div>
<div class="ui container text">
<h3 class="ui header">Text Content (Readable)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias aspernatur consectetur cupiditate debitis delectus et, eum fuga, impedit magni mollitia natus perferendis porro quia sit temporibus veritatis. Eveniet, labore.</p>
</div>
@endsection
@extends('etalase::layout')
@section('content-inner')
<div class="ui message">Content goes here...</div>
@endsection
@extends('etalase::layout')
@section('content-inner')
<form action="" class="ui form">
<div class="field">
<label for="">Destination</label>
<select class="ui search">
</select>
</div>
</form>
@endsection
@push('body')
<script>
$(function () {
$('.ui.search')
.dropdown({
apiSettings: {
url: '{{ url('etalase/search') }}/{query}'
},
saveRemoteData: false
});
});
</script>
@endpush
@extends('etalase::layout')
@section('content-inner')
@etalase('Padding')
<div class="ui segment p-0">
No padding
</div>
<div class="ui segment p-x-0">
No horizontal padding
</div>
<div class="ui segment p-y-0">
No vertical padding
</div>
<div class="ui segment p-2">
Double padding
</div>
@endetalase
<div class="ui divider hidden section"></div>
@etalase('Margin')
<div class="ui segment m-0">
No margin
</div>
<p>content here...</p>
<div class="ui segment m-1">
Margin all
</div>
<p>content here...</p>
<div class="ui segment m-2">
Double margin all
</div>
<p>content here...</p>
@endetalase
<div class="ui divider hidden section"></div>
<h2 class="ui header">Available Class</h2>
<div class="ui grid stackable two column">
<div class="column">
<h3 class="ui header">Padding</h3>
<pre><code>
.p-0
.p-t-0
.p-r-0
.p-b-0
.p-l-0
.p-x-0
.p-y-0
.p-1
.p-t-1
.p-r-1
.p-b-1
.p-l-1
.p-x-1
.p-y-1
.p-2
.p-t-2
.p-r-2
.p-b-2
.p-l-2
.p-x-2
.p-y-2
</code></pre>
</div>
<div class="column">
<h3 class="ui header">Margin</h3>
<pre><code>
.m-0
.m-t-0
.m-r-0
.m-b-0
.m-l-0
.m-x-0
.m-y-0
.m-1
.m-t-1
.m-r-1
.m-b-1
.m-l-1
.m-x-1
.m-y-1
.m-2
.m-t-2
.m-r-2
.m-b-2
.m-l-2
.m-x-2
.m-y-2
</code></pre>
</div>
</div>
@endsection
@extends('etalase::layout')
@section('content-inner')
<div class="ui segment basic center aligned">
<h2 class="ui header horizontal divider">Table</h2>
<div class="ui list">
<a href="#basic" class="item">Basic</a>
<a href="#dropdown" class="item">Dropdown Action</a>
<a href="#single-line" class="item">Single Line</a>
<a href="#datatable" class="item">Datatable</a>
</div>
</div>
<a name="basic"></a>
@etalase('Basic Table', 'etalase::example.table.basic')
<div class="ui message warning">
Gunakan inline action jika tombol aksinya tidak terlalu banyak (maksimal 3).
Jika pilihan aksi lebih dari 3, gunakan dropdown seperti contoh di bawah ini.
</div>
<div class="ui divider hidden section"></div>
<a name="dropdown"></a>
@etalase('Dropdown Action', 'etalase::example.table.dropdown')
<div class="ui divider hidden section"></div>
<a name="single-line"></a>
@etalase('Single Line', 'etalase::example.table.single')
<div class="ui message warning">
<p>Jika konten yang ditampilkan sangat panjang, gunakan jenis tabel single line agar tampilan lebih nyaman dilihat.</p>
<p>Jangan lupa untuk <strong>mengatur width</strong> masing-masing kolom.</p>
</div>
<div class="ui divider hidden section"></div>
<a name="datatable"></a>
@etalase('Datatable', 'etalase::example.table.datatable')
@endsection
<table class="ui table fixed">
<thead>
<tr>
<th>Nama</th>
<th width="25%">Email</th>
<th width="25%">Status</th>
<th width="150">Action</th>
</tr>
</thead>
<tbody>
@foreach(range(1,3) as $item)
<tr>
<td>{{ $faker->name }}</td>
<td>{{ $faker->safeEmail }}</td>
<td>
<div class="ui label">ACTIVE</div>
</td>
<td>
<a class="ui button mini" href="">Edit</a>
<a class="ui button icon mini" href=""><i class="icon trash"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="ui menu top attached">
<div class="item borderless">
<h3>Datatable</h3>
</div>
<div class="right menu">
<div class="item">
<form>
<div class="ui transparent icon input">
<input class="prompt" name="search" value="" type="text" placeholder="Cari...">
<i class="search link icon"></i>
</div>
</form>
</div>
</div>
</div>
<table class="ui table attached single line fixed">
<thead>
<tr>
<th width="50">
<div class="ui checkbox" data-toggle="checkall" data-selector=".checkbox[data-type='check-all-child']">
<input type="checkbox">
</div>
</th>
<th>Title</th>
<th width="50%">Content</th>
<th width="150">Category</th>
<th width="100">Published Date</th>
</tr>
</thead>
<tbody>
@foreach(range(1,3) as $i => $item)
<tr>
<td>
<div class="ui checkbox" data-type="check-all-child">
<input type="checkbox" name="_ids[]" value="{{ $i }}">
</div>
</td>
<td>{{ $faker->sentence(3) }}</td>
<td>{{ $faker->paragraph(3) }}</td>
<td>Uncategorize</td>
<td>{{ $faker->date('j F Y') }}</td>
</tr>
@endforeach
</tbody>
</table>
<div class="ui menu bottom attached">
<div class="item borderless">
<small>Menampilkan 1-9 dari total 9</small>
</div>
<ul class="menu attached right bottom">
<div class="item disabled"><i class="icon angle left"></i></div>
<a class="item active">1</a>
<a class="item">2</a>
<a class="item"><i class="icon angle right"></i></a>
</ul>
</div>
<table class="ui table">
<thead>
<tr>
<th>Nama</th>
<th width="25%">Email</th>
<th width="25%">Status</th>
<th width="150"></th>
</tr>
</thead>
<tbody>
@foreach(range(1,3) as $item)
<tr>
<td>{{ $faker->name }}</td>
<td>{{ $faker->safeEmail }}</td>
<td>
<div class="ui label">ACTIVE</div>
</td>
<td>
<div class="ui dropdown button mini">
Action
<i class="dropdown icon"></i>
<div class="menu">
<a href="#" class="item"><i class="icon user"></i> View Profile</a>
<a href="#" class="item"><i class="icon edit"></i> Edit</a>
<a href="#" class="item"><i class="icon ban"></i> Ban...</a>
<div class="divider"></div>
<a href="#" class="item"><i class="icon trash"></i> Delete...</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<table class="ui table single line fixed">
<thead>
<tr>
<th>Title</th>
<th width="50%">Content</th>
<th width="150">Category</th>
<th width="150">Published Date</th>
</tr>
</thead>
<tbody>
@foreach(range(1,3) as $item)
<tr>
<td>{{ $faker->sentence(10) }}</td>
<td>{{ $faker->paragraph(3) }}</td>
<td>Uncategorized</td>
<td>{{ $faker->date('j F Y') }}</td>
</tr>
@endforeach
</tbody>
</table>
@extends('etalase::layout')
@section('content-inner')
@etalase('Text Color')
@foreach(['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black'] as $color)
<div class="{{ $color }} text">{{ $color }}</div>
@endforeach
@endetalase
@endsection
@extends('ui::layouts.app')
@section('content')
@yield('content-inner')
@endsection
@push('head')
<link rel="stylesheet" type="text/css" href="{{ asset('lib/highlightjs/github.css') }}"/>
<style>
.example {
position: relative;
}
.example .example__title {
margin-bottom: 2rem;
}
.example .example__title .ui.header {
}
.example .example__title .buttons {
position: absolute;
top: 0;
right: 0;
}
.example .example__code {
display: none;
max-height: 400px;
overflow: auto;
margin-bottom: 2rem;
}
.example .example__code pre {
margin: 0;
}
</style>
@endpush
@push('body')
<script type="text/javascript" src="{{ asset('lib/highlightjs/highlight.pack.js') }}"></script>
<script src="{{ asset('lib/clipboard/clipboard.min.js') }}"></script>
<script>
$(document).ready(function () {
$('.example pre code').each(function (i, block) {
hljs.highlightBlock(block);
});
$('.example').on('click', '.button--code', function (e) {
$(e.delegateTarget).find('.example__code').toggle();
});
$('.example .button--copy').popup({
on: 'manual'
});
clipboard = new Clipboard('.example .button--copy', {
text: function (trigger) {
return $(trigger).closest('.example').find('.example__preview').html();
}
});
clipboard.on('success', function (e) {
$(e.trigger).popup('show');
setTimeout(function(){
$(e.trigger).popup('hide');
}, 2000);
});
$('.ui.calendar').each(function (idx, elm) {
elm = $(elm);
var format = elm.data('format');
if (!format) {
format = 'YYYY/MM/DD';
}
elm.calendar({
type: 'date',
formatter: {
date: function (date, settings) {
if (!date) {
return '';
}
var DD = ("0" + date.getDate()).slice(-2);
var MM = ("0" + (date.getMonth() + 1)).slice(-2);
var MMMM = settings.text.months[date.getMonth()];
var YY = date.getFullYear().toString().substr(2, 2);
var YYYY = date.getFullYear();
return format.replace('DD', DD).replace('MMMM', MMMM).replace('MM', MM).replace('YYYY', YYYY).replace('YY', YY);
}
}
});
});
Messenger.options = {
extraClasses: 'messenger-fixed messenger-on-top animated',
theme: 'dark'
};
});
</script>
@endpush
@extends('ui::layouts.back')
@section('content')
<div class="ui message warning">Halaman yang Anda minta tidak tersedia.</div>
@endsection
<?php
namespace Laravolt\Etalase;
class Etalase
{
protected $title = 'Untitled';
public function start($title, $view = '')
{
$this->title = $title;
if ($view === '') {
ob_start();
} else {
$content = view($view)->render();
$title = $this->title;
return view('etalase::container', compact('content', 'title'));
}
}
public function stop()
{
$content = ob_get_clean();
$title = $this->title;
return view('etalase::container', compact('content', 'title'));
}
}
<?php
namespace Laravolt\Etalase;
use App\User;
use Faker\Factory;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider as BaseServiceProvider;
/**
* Class PackageServiceProvider
*
* @package Laravolt\Ui
* @see http://laravel.com/docs/master/packages#service-providers
* @see http://laravel.com/docs/master/providers
*/
class ServiceProvider extends BaseServiceProvider
{
public function register()
{
$this->app->singleton('laravolt.etalase', function(){
return new Etalase();
});
}
public function boot()
{
$this->loadViewsFrom(realpath(__DIR__.'/../resources/views'), 'etalase');
$this->loadRoutes();
$this->registerMenu();
$this->registerBlade();
$this->registerVariables();
//auth()->login(User::first());
}
protected function loadRoutes()
{
/**
* @var \Illuminate\Routing\Router $router
*/
$router = $this->app['router'];
$router->group(['prefix' => 'etalase', 'middleware' => ['web']], function () use ($router) {
$router->get('search/{query?}', function($query){
$data = \Indonesia::search($query)->paginateVillages();
$results = [];
foreach($data as $village) {
$data->load('district.city.province');
$results[] = [
'name' => "<strong>$village->name</strong>, $village->district_name, $village->city_name, $village->province_name",
'description' => "$village->name, $village->district_name, $village->city_name, $village->province_name",
'value' => $village->id,
];
}
$json = ['success' => true, 'results' => $results];
return response()->json($json);
});
$router->get('{page}', function ($page) {
try {
return view('etalase::example.'.$page);
} catch (\Exception $e) {
return view('etalase::missing', compact('page'));
}
})->where('page', '.*');
});
}
protected function registerMenu()
{
if ($this->app->bound('laravolt.menu')) {
$menu = $this->app['laravolt.menu']->add('UI Element')->data('icon', 'puzzle');
$menu->add('Button', url('etalase/button'));
$menu->add('Definition', url('etalase/definition'));
$menu->add('Table', url('etalase/table'));
$menu->add('Form', url('etalase/form'));
$menu->add('Flash Message', url('etalase/flash'));
$menu->add('Breadcrumb', url('etalase/breadcrumb'));
$menu = $this->app['laravolt.menu']->add('Layout')->data('icon', 'block layout');
$menu->add('Sidebar', url('etalase/layout/sidebar'));
$menu->add('Minimalist', url('etalase/layout/minimalist'));
$menu = $this->app['laravolt.menu']->add('Utility')->data('icon', 'high battery');
$menu->add('Text Color', url('etalase/text'));
$menu->add('Spacing', url('etalase/spacing'));
$menu = $this->app['laravolt.menu']->add('Sample Page')->data('icon', 'browser');
$menu->add('Dashboard', url('etalase/dashboard'));
$menu->add('Control Panel', url('etalase/dashboard/control-panel'));
$menu->add('Launcher', url('etalase/launcher'));
$menu->add('Summary Board', url('etalase/dashboard/summary'));
$menu->add('Inbox', url('etalase/inbox'));
$menu->add('Dropdown Shipping', url('etalase/shipping'));
}
}
protected function registerBlade()
{
Blade::directive('etalase', function($expression) {
return "<?php echo app('laravolt.etalase')->start($expression); ?>";
});
Blade::directive('endetalase', function($expression) {
return "<?php echo app('laravolt.etalase')->stop(); ?>";
});
}
protected function registerVariables()
{
View::composer('etalase::*', function($view){
$faker = Factory::create();
$view->with('faker', $faker);
});
}
}
/Volumes/Uyab/Code/laravolt/ui/src/../public
\ No newline at end of file
/*!
* clipboard.js v1.5.12
* https://zenorocha.github.io/clipboard.js
*
* Licensed MIT © Zeno Rocha
*/
!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}}(function(){var t,e,n;return function t(e,n,o){function i(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(r)return r(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return i(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a<o.length;a++)i(o[a]);return i}({1:[function(t,e,n){var o=t("matches-selector");e.exports=function(t,e,n){for(var i=n?t:t.parentNode;i&&i!==document;){if(o(i,e))return i;i=i.parentNode}}},{"matches-selector":5}],2:[function(t,e,n){function o(t,e,n,o,r){var a=i.apply(this,arguments);return t.addEventListener(n,a,r),{destroy:function(){t.removeEventListener(n,a,r)}}}function i(t,e,n,o){return function(n){n.delegateTarget=r(n.target,e,!0),n.delegateTarget&&o.call(t,n)}}var r=t("closest");e.exports=o},{closest:1}],3:[function(t,e,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){var e=Object.prototype.toString.call(t);return"[object Function]"===e}},{}],4:[function(t,e,n){function o(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!c.string(e))throw new TypeError("Second argument must be a String");if(!c.fn(n))throw new TypeError("Third argument must be a Function");if(c.node(t))return i(t,e,n);if(c.nodeList(t))return r(t,e,n);if(c.string(t))return a(t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function i(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.removeEventListener(e,n)}}}function r(t,e,n){return Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{destroy:function(){Array.prototype.forEach.call(t,function(t){t.removeEventListener(e,n)})}}}function a(t,e,n){return s(document.body,t,e,n)}var c=t("./is"),s=t("delegate");e.exports=o},{"./is":3,delegate:2}],5:[function(t,e,n){function o(t,e){if(r)return r.call(t,e);for(var n=t.parentNode.querySelectorAll(e),o=0;o<n.length;++o)if(n[o]==t)return!0;return!1}var i=Element.prototype,r=i.matchesSelector||i.webkitMatchesSelector||i.mozMatchesSelector||i.msMatchesSelector||i.oMatchesSelector;e.exports=o},{}],6:[function(t,e,n){function o(t){var e;if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName)t.focus(),t.setSelectionRange(0,t.value.length),e=t.value;else{t.hasAttribute("contenteditable")&&t.focus();var n=window.getSelection(),o=document.createRange();o.selectNodeContents(t),n.removeAllRanges(),n.addRange(o),e=n.toString()}return e}e.exports=o},{}],7:[function(t,e,n){function o(){}o.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function o(){i.off(t,o),e.apply(n,arguments)}var i=this;return o._=e,this.on(t,o,n)},emit:function(t){var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,i=n.length;for(o;i>o;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],i=[];if(o&&e)for(var r=0,a=o.length;a>r;r++)o[r].fn!==e&&o[r].fn._!==e&&i.push(o[r]);return i.length?n[t]=i:delete n[t],this}},e.exports=o},{}],8:[function(e,n,o){!function(i,r){if("function"==typeof t&&t.amd)t(["module","select"],r);else if("undefined"!=typeof o)r(n,e("select"));else{var a={exports:{}};r(a,i.select),i.clipboardAction=a.exports}}(this,function(t,e){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i=n(e),r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},a=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),c=function(){function t(e){o(this,t),this.resolveOptions(e),this.initSelection()}return t.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action=e.action,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""},t.prototype.initSelection=function t(){this.text?this.selectFake():this.target&&this.selectTarget()},t.prototype.selectFake=function t(){var e=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return e.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[n?"right":"left"]="-9999px",this.fakeElem.style.top=(window.pageYOffset||document.documentElement.scrollTop)+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,i.default)(this.fakeElem),this.copyText()},t.prototype.removeFake=function t(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)},t.prototype.selectTarget=function t(){this.selectedText=(0,i.default)(this.target),this.copyText()},t.prototype.copyText=function t(){var e=void 0;try{e=document.execCommand(this.action)}catch(n){e=!1}this.handleResult(e)},t.prototype.handleResult=function t(e){e?this.emitter.emit("success",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)}):this.emitter.emit("error",{action:this.action,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})},t.prototype.clearSelection=function t(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()},t.prototype.destroy=function t(){this.removeFake()},a(t,[{key:"action",set:function t(){var e=arguments.length<=0||void 0===arguments[0]?"copy":arguments[0];if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function t(){return this._action}},{key:"target",set:function t(e){if(void 0!==e){if(!e||"object"!==("undefined"==typeof e?"undefined":r(e))||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&e.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(e.hasAttribute("readonly")||e.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=e}},get:function t(){return this._target}}]),t}();t.exports=c})},{select:6}],9:[function(e,n,o){!function(i,r){if("function"==typeof t&&t.amd)t(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if("undefined"!=typeof o)r(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=a.exports}}(this,function(t,e,n,o){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var l=i(e),u=i(n),f=i(o),d=function(t){function e(n,o){r(this,e);var i=a(this,t.call(this));return i.resolveOptions(o),i.listenClick(n),i}return c(e,t),e.prototype.resolveOptions=function t(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText},e.prototype.listenClick=function t(e){var n=this;this.listener=(0,f.default)(e,"click",function(t){return n.onClick(t)})},e.prototype.onClick=function t(e){var n=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new l.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})},e.prototype.defaultAction=function t(e){return s("action",e)},e.prototype.defaultTarget=function t(e){var n=s("target",e);return n?document.querySelector(n):void 0},e.prototype.defaultText=function t(e){return s("text",e)},e.prototype.destroy=function t(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)},e}(u.default);t.exports=d})},{"./clipboard-action":8,"good-listener":4,"tiny-emitter":7}]},{},[9])(9)});
\ No newline at end of file
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
}
.hljs-comment,
.hljs-quote {
color: #998;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080;
}
.hljs-string,
.hljs-doctag {
color: #d14;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: bold;
}
.hljs-subst {
font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
# LARAVOLT
## Getting Started
### 1. Symlink assets (css, js, icons, dll) dari laravolt/ui ke folder `public`
- Jalankan perintah `php artisan laravolt:link-assets`
### 2. Ubah redirect route ketika mengakses halaman yang butuh autentikasi
- Tambahkan potongan kode berikut ke file `app/Exceptions/Handler.php`:
```php
protected function unauthenticated($request, AuthenticationException $exception)
{
return $request->expectsJson()
? response()->json(['message' => $exception->getMessage()], 401)
: redirect()->guest(route('auth::login'));
}
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment