diff --git a/app/Http/Controllers/UsersController.php b/app/Http/Controllers/UsersController.php index cd56584..6d9d5b4 100644 --- a/app/Http/Controllers/UsersController.php +++ b/app/Http/Controllers/UsersController.php @@ -94,6 +94,11 @@ class UsersController extends Controller return view('users.chart', compact('user', 'childs', 'father', 'mother', 'fatherGrandpa', 'fatherGrandma', 'motherGrandpa', 'motherGrandma', 'siblings', 'colspan')); } + public function tree(User $user) + { + return view('users.tree', compact('user')); + } + /** * Show the form for editing the specified resource. * diff --git a/public/css/tree.css b/public/css/tree.css new file mode 100644 index 0000000..2133420 --- /dev/null +++ b/public/css/tree.css @@ -0,0 +1,173 @@ +/*Now the CSS*/ +* {margin: 0; padding: 0;} + +.tree ul { + padding-top: 20px; position: relative; + + transition: all 0.2s; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; +} + +.tree ul.branch-2 { + padding-top: 0; + left: 10%; + border-left: 1px solid #ccc; +} + +.tree li { + float: left; text-align: center; + list-style-type: none; + position: relative; + padding: 20px 5px 0 5px; + + transition: all 0.2s; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; +} + +.tree .branch-1 > li { + text-align: left; + /*border-left: 1px solid #ccc;*/ +} + +.tree .branch-2 li { + float: none; + text-align: left; + padding-left: 10px; +} + +/*We will use ::before and ::after to draw the connectors*/ + +.tree li::before, .tree li::after{ + content: ''; + position: absolute; top: 0; right: 50%; + border-top: 1px solid #ccc; + width: 50%; height: 20px; +} + +.tree li::after{ + right: auto; left: 50%; + border-left: 1px solid #ccc; +} + +.tree .branch-2 li::after{ + border-left: none; +} + +.tree .branch-2 li::before, .tree .branch-2 li::after{ + content: ''; + position: absolute; + top: 30px; + right: 50%; + border-bottom: 1px solid #ccc; + border-top: none; + width: 10px; + height: 5px; +} + +.tree .branch-2 li::before { + display: none; +} + +.tree .branch-2 li::after{ + right: auto; + left: 0%; + /*border-left: 1px solid #ccc;*/ +} + +/*We need to remove left-right connectors from elements without any siblings*/ +.tree li:only-child::after, .tree li:only-child::before { + display: block; +} + +/*Remove space from the top of single children*/ +.tree .branch-0 > li:only-child{ padding-top: 0; } + +/*Remove left connector from first child and right connector from last child*/ +.tree li:first-child::before, .tree li:last-child::after{ + border: 0 none; +} + +.tree .branch-2 li:first-child::before, .tree .branch-2 li:last-child::after { + right: auto; + left: 0%; + /*border-left: 1px solid #ccc;*/ + border-bottom: 1px solid #ccc; +} + +/*Adding back the vertical connector to the last nodes*/ +.tree .branch-1 li:last-child::before{ + border-right: 1px solid #ccc; + border-radius: 0 5px 0 0; + -webkit-border-radius: 0 5px 0 0; + -moz-border-radius: 0 5px 0 0; +} +.tree li:first-child::after{ + border-radius: 5px 0 0 0; + -webkit-border-radius: 5px 0 0 0; + -moz-border-radius: 5px 0 0 0; +} + +/*.tree .branch-2 li:first-child::after{ + border-radius: 0; + top: 0; + height: 35px; +} + +.tree .branch-2 li:last-child::after{ + border-radius: 0 0 0 5px; + -webkit-border-radius: 0 0 0 5px; + -moz-border-radius: 0 0 0 5px; +}*/ + +/*Time to add downward connectors from parents*/ +.tree ul ul::before{ + content: ''; + position: absolute; top: 0; left: 50%; + /*border-left: 1px solid #ccc;*/ + width: 0; height: 20px; +} + +.tree ul.branch-1::before{ + border-left: 1px solid #ccc; +} + +.tree ul ul.branch-2::before{ + left: 0; +} + +.tree li a { + min-width: 100px; + border: 1px solid #ccc; + padding: 5px 10px; + text-decoration: none; + color: #666; + font-family: arial, verdana, tahoma; + font-size: 11px; + display: inline-block; + + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + + transition: all 0.2s; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; +} + +/*Time for some hover effects*/ +/*We will apply the hover effect the the lineage of the element also*/ +.tree li a:hover, .tree li a:hover+ul li a { + background: #c8e4f8; color: #000; border: 1px solid #94a0b4; +} +/*Connector styles on hover*/ +.tree li a:hover+ul li::after, +.tree li a:hover+ul li::before, +.tree li a:hover+ul::before, +.tree li a:hover+ul ul::before{ + border-color: #94a0b4; +} + +/*Thats all. I hope you enjoyed it. +Thanks :)*/ \ No newline at end of file diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index fcbd464..97cd30c 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -12,6 +12,12 @@ + @yield('ext_css') +
@@ -78,5 +84,7 @@ + @yield('ext_js') + @yield('script') diff --git a/resources/views/users/chart.blade.php b/resources/views/users/chart.blade.php index 3376a0c..f2488a7 100644 --- a/resources/views/users/chart.blade.php +++ b/resources/views/users/chart.blade.php @@ -1,84 +1,83 @@ @extends('layouts.app') @section('content') -
- {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }} -
-

{{ $user->profileLink('chart') }}

+

+
+ {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }} +
+ {{ $user->name }} Bagan Keluarga +

+
- - + + + + - + - + - @foreach($childs as $child) - - @endforeach
Kakek & Nenek - {{ $fatherGrandpa ? $fatherGrandpa->profileLink('chart') : '?' }} - {{ $fatherGrandma ? $fatherGrandma->profileLink('chart') : '?' }} - - {{ $motherGrandpa ? $motherGrandpa->profileLink('chart') : '?' }} - - {{ $motherGrandma ? $motherGrandma->profileLink('chart') : '?' }} + Kakek & Nenek + {{ $fatherGrandpa ? $fatherGrandpa->profileLink('chart') : '?' }} + + {{ $fatherGrandma ? $fatherGrandma->profileLink('chart') : '?' }} + + {{ $motherGrandpa ? $motherGrandpa->profileLink('chart') : '?' }} + + {{ $motherGrandma ? $motherGrandma->profileLink('chart') : '?' }}
Ayah & Ibu - {{ $father ? $father->profileLink('chart') : '?' }} - {{ $mother ? $mother->profileLink('chart') : '?' }} + + {{ $father ? $father->profileLink('chart') : '?' }} + + {{ $mother ? $mother->profileLink('chart') : '?' }}
 {{ $user->profileLink('chart') }} ({{ $user->gender }}) + {{ $user->profileLink('chart') }} ({{ $user->gender }}) +
Anak-Anak & Cucu-Cucu - {{ $child->profileLink('chart') }} ({{ $child->gender }}) -
    - @foreach($child->childs as $grand) -
  • {{ $grand->profileLink('chart') }} ({{ $grand->gender }})
    • +
+ + @foreach($childs->chunk(4) as $chunkedChild) +
+ @foreach($chunkedChild as $child) +
+

{{ ++$no }}. {{ $child->profileLink('chart') }} ({{ $child->gender }})

+
    + @foreach($child->childs as $grand) +
  • {{ $grand->profileLink('chart') }} ({{ $grand->gender }})
    • + @endforeach +
+
@endforeach - + @if (! $loop->last) +
+ @endif +
+ @endforeach
-@foreach ($siblings->chunk(4) as $chunkedSiblings) + +

+ Saudara, Keponakan, dan Cucu +

+@foreach ($siblings->chunk(3) as $chunkedSiblings)
@foreach ($chunkedSiblings as $sibling) -
-
- - - - - - - - - - - -
Saudara{{ $sibling->profileLink('chart') }} ({{ $sibling->gender }})
Keponakan & Cucu-Cucu -
    - @foreach($sibling->childs as $child) -
  1. - {{ $child->profileLink('chart') }} ({{ $child->gender }}) -
      - @foreach($child->childs as $grand) -
    • {{ $grand->profileLink('chart') }} ({{ $grand->gender }})
      • - @endforeach -
    -
    2. - @endforeach -
-
-
+
+ @include('users.partials.chart-sibling')
@endforeach
diff --git a/resources/views/users/partials/chart-sibling.blade.php b/resources/views/users/partials/chart-sibling.blade.php new file mode 100644 index 0000000..a56594c --- /dev/null +++ b/resources/views/users/partials/chart-sibling.blade.php @@ -0,0 +1,27 @@ +
+ + + + + + + + + + + +
Saudara{{ $sibling->profileLink('chart') }} ({{ $sibling->gender }})
Keponakan & Cucu-Cucu +
    + @foreach($sibling->childs as $child) +
  1. + {{ $child->profileLink('chart') }} ({{ $child->gender }}) +
      + @foreach($child->childs as $grand) +
    • {{ $grand->profileLink('chart') }} ({{ $grand->gender }})
      • + @endforeach +
    +
    2. + @endforeach +
+
+
\ No newline at end of file diff --git a/resources/views/users/show.blade.php b/resources/views/users/show.blade.php index db0dd03..99d7ae7 100644 --- a/resources/views/users/show.blade.php +++ b/resources/views/users/show.blade.php @@ -1,11 +1,14 @@ @extends('layouts.app') @section('content') -
- {{ link_to_route('users.edit', 'Edit Data '.$currentUser->name, [$currentUser->id], ['class' => 'btn btn-warning']) }} - {{ link_to_route('users.chart', 'Lihat Chart Keluarga '.$currentUser->name, [$currentUser->id], ['class' => 'btn btn-default']) }} -
-

{{ $currentUser->profileLink() }}

+

+
+ {{ link_to_route('users.edit', 'Edit Data', [$currentUser->id], ['class' => 'btn btn-warning']) }} + {{ link_to_route('users.chart', 'Lihat Bagan Keluarga', [$currentUser->id], ['class' => 'btn btn-default']) }} + {{ link_to_route('users.tree', 'Lihat Pohon Keluarga', [$currentUser->id], ['class' => 'btn btn-default']) }} +
+ {{ $currentUser->name }} Profil +

@include('users.partials.profile', ['user' => $currentUser]) diff --git a/resources/views/users/tree.blade.php b/resources/views/users/tree.blade.php new file mode 100644 index 0000000..7b7d072 --- /dev/null +++ b/resources/views/users/tree.blade.php @@ -0,0 +1,46 @@ +@extends('layouts.app') + +@section('content') +
+
+

+
+ {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }} +
+ {{ $user->name }} Pohon Keluarga +

+ +
+
    +
  • + {{ $user->profileLink() }} +
      + @foreach($user->childs as $child) +
    • + {{ $child->profileLink() }} +
        + @foreach($child->childs as $grand) +
      • + {{ $grand->profileLink() }} +
          + @foreach($grand->childs as $gg) +
        • + {{ $gg->profileLink() }} +
          • + @endforeach +
        +
        • + @endforeach +
      +
      • + @endforeach +
    +
    • +
+
+
+@endsection + +@section ('ext_css') + +@endsection diff --git a/routes/web.php b/routes/web.php index 6a2393f..e85876f 100644 --- a/routes/web.php +++ b/routes/web.php @@ -30,3 +30,4 @@ Route::get('users/{user}', 'UsersController@show')->name('users.show'); Route::get('users/{user}/edit', 'UsersController@edit')->name('users.edit'); Route::patch('users/{user}', 'UsersController@update')->name('users.update'); Route::get('users/{user}/chart', 'UsersController@chart')->name('users.chart'); +Route::get('users/{user}/tree', 'UsersController@tree')->name('users.tree');