Added family tree

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.
      *

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 :)*/

resources/views/layouts/app.blade.php

@@ -12,6 +12,12 @@
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @yield('ext_css')
+    <style>
+    .page-header {
+        margin-top: 0px;
+    }
+    </style>
 </head>
 <body>
     <div id="app">
@@ -78,5 +84,7 @@
 
     <!-- Scripts -->
     <script src="{{ asset('js/app.js') }}"></script>
+    @yield('ext_js')
+    @yield('script')
 </body>
 </html>

resources/views/users/chart.blade.php

@@ -1,84 +1,83 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="pull-right">
-    {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }}
-</div>
-<h3 class="page-header text-center">{{ $user->profileLink('chart') }}</h3>
 </div>
 <div class="container-fluid">
+<h1 class="page-header">
+    <div class="pull-right">
+        {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }}
+    </div>
+    {{ $user->name }} <small>Bagan Keluarga</small>
+</h1>
+
 <div class="panel panel-default table-responsive">
     <table class="table table-bordered table-striped">
         <tbody>
             <tr>
-                <th style="width: 10%">Kakek & Nenek</th>
-                <td class="text-center" colspan="{{ $colspan }}">
-                    <span class="col-xs-3">{{ $fatherGrandpa ? $fatherGrandpa->profileLink('chart') : '?' }}</span>
-                    <span class="col-xs-3">{{ $fatherGrandma ? $fatherGrandma->profileLink('chart') : '?' }}</span>
-                    <span class="col-xs-3" style="border-left:1px solid #ccc">
-                        {{ $motherGrandpa ? $motherGrandpa->profileLink('chart') : '?' }}
-                    </span>
-                    <span class="col-xs-3">{{ $motherGrandma ? $motherGrandma->profileLink('chart') : '?' }}</span>
+                <th style="width: 9%">Kakek & Nenek</th>
+                <td class="text-center">
+                    {{ $fatherGrandpa ? $fatherGrandpa->profileLink('chart') : '?' }}
+                </td>
+                <td class="text-center">
+                    {{ $fatherGrandma ? $fatherGrandma->profileLink('chart') : '?' }}
+                </td>
+                <td class="text-center">
+                    {{ $motherGrandpa ? $motherGrandpa->profileLink('chart') : '?' }}
+                </td>
+                <td class="text-center">
+                    {{ $motherGrandma ? $motherGrandma->profileLink('chart') : '?' }}
                 </td>
             </tr>
             <tr>
                 <th>Ayah & Ibu</th>
-                <td class="text-center" colspan="{{ $colspan }}">
-                    <span class="col-xs-6">{{ $father ? $father->profileLink('chart') : '?' }}</span>
-                    <span class="col-xs-6" style="border-left:1px solid #ccc">{{ $mother ? $mother->profileLink('chart') : '?' }}</span>
+                <td class="text-center" colspan="2">
+                    {{ $father ? $father->profileLink('chart') : '?' }}
+                </td>
+                <td class="text-center" colspan="2">
+                    {{ $mother ? $mother->profileLink('chart') : '?' }}
                 </td>
             </tr>
             <tr>
                 <th>&nbsp;</th>
-                <th class="text-center" colspan="{{ $colspan }}">{{ $user->profileLink('chart') }} ({{ $user->gender }})</th>
+                <td class="text-center lead" colspan="4">
+                    <strong>{{ $user->profileLink('chart') }} ({{ $user->gender }})</strong>
+                </td>
             </tr>
             <tr>
                 <th>Anak-Anak & Cucu-Cucu</th>
-                @foreach($childs as $child)
-                <td>
-                    {{ $child->profileLink('chart') }} ({{ $child->gender }})
-                    <ul style="padding-left: 18px">
-                        @foreach($child->childs as $grand)
-                        <li>{{ $grand->profileLink('chart') }} ({{ $grand->gender }})</li>
+                <td colspan="4">
+                    <?php $no = 0; ?>
+                    @foreach($childs->chunk(4) as $chunkedChild)
+                    <div class="">
+                        @foreach($chunkedChild as $child)
+                        <div class="col-md-3">
+                            <h4><strong>{{ ++$no }}. {{ $child->profileLink('chart') }} ({{ $child->gender }})</strong></h4>
+                            <ul style="padding-left: 30px">
+                                @foreach($child->childs as $grand)
+                                <li>{{ $grand->profileLink('chart') }} ({{ $grand->gender }})</li>
+                                @endforeach
+                            </ul>
+                        </div>
                         @endforeach
-                    </ul>
+                        @if (! $loop->last)
+                        <div class="clearfix"></div><hr>
+                        @endif
+                    </div>
+                    @endforeach
                 </td>
-                @endforeach
             </tr>
         </tbody>
     </table>
 </div>
-@foreach ($siblings->chunk(4) as $chunkedSiblings)
+
+<h4 class="page-header">
+    Saudara, Keponakan, dan Cucu
+</h4>
+@foreach ($siblings->chunk(3) as $chunkedSiblings)
 <div class="row">
     @foreach ($chunkedSiblings as $sibling)
-    <div class="col-sm-3">
-        <div class="panel panel-default table-responsive">
-            <table class="table table-bordered table-striped">
-                <tbody>
-                    <tr>
-                        <th style="width: 35%">Saudara</th>
-                        <th class="text-center" colspan="{{ $sibling->childs->count() }}">{{ $sibling->profileLink('chart') }} ({{ $sibling->gender }})</th>
-                    </tr>
-                    <tr>
-                        <th>Keponakan & Cucu-Cucu</th>
-                        <td>
-                            <ol style="padding-left: 15px">
-                                @foreach($sibling->childs as $child)
-                                <li>
-                                    {{ $child->profileLink('chart') }} ({{ $child->gender }})
-                                    <ul style="padding-left: 18px">
-                                        @foreach($child->childs as $grand)
-                                        <li>{{ $grand->profileLink('chart') }} ({{ $grand->gender }})</li>
-                                        @endforeach
-                                    </ul>
-                                </li>
-                                @endforeach
-                            </ol>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+    <div class="col-sm-4">
+        @include('users.partials.chart-sibling')
     </div>
     @endforeach
 </div>

resources/views/users/partials/chart-sibling.blade.php

@@ -0,0 +1,27 @@
+<div class="panel panel-default table-responsive">
+    <table class="table table-bordered table-striped">
+        <tbody>
+            <tr>
+                <th style="width: 35%">Saudara</th>
+                <th class="text-center" colspan="{{ $sibling->childs->count() }}">{{ $sibling->profileLink('chart') }} ({{ $sibling->gender }})</th>
+            </tr>
+            <tr>
+                <th>Keponakan & Cucu-Cucu</th>
+                <td>
+                    <ol style="padding-left: 15px">
+                        @foreach($sibling->childs as $child)
+                        <li style="margin-top: 10px;">
+                            {{ $child->profileLink('chart') }} ({{ $child->gender }})
+                            <ul style="padding-left: 18px">
+                                @foreach($child->childs as $grand)
+                                <li>{{ $grand->profileLink('chart') }} ({{ $grand->gender }})</li>
+                                @endforeach
+                            </ul>
+                        </li>
+                        @endforeach
+                    </ol>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>

resources/views/users/show.blade.php

@@ -1,11 +1,14 @@
 @extends('layouts.app')
 
 @section('content')
-    <div class="pull-right">
-        {{ 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']) }}
-    </div>
-    <h3 class="page-header text-center">{{ $currentUser->profileLink() }}</h3>
+    <h1 class="page-header">
+        <div class="pull-right">
+            {{ 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']) }}
+        </div>
+        {{ $currentUser->name }} <small>Profil</small>
+    </h1>
     <div class="row">
         <div class="col-md-6">
             @include('users.partials.profile', ['user' => $currentUser])

resources/views/users/tree.blade.php

@@ -0,0 +1,46 @@
+@extends('layouts.app')
+
+@section('content')
+</div>
+<div class="container-fluid">
+<h1 class="page-header">
+    <div class="pull-right">
+        {{ link_to_route('users.show', 'Lihat Profil '.$user->name, [$user->id], ['class' => 'btn btn-default']) }}
+    </div>
+    {{ $user->name }} <small>Pohon Keluarga</small>
+</h1>
+
+<div class="tree">
+    <ul class="branch-0">
+        <li>
+            {{ $user->profileLink() }}
+            <ul class="branch-1">
+                @foreach($user->childs as $child)
+                <li>
+                    {{ $child->profileLink() }}
+                    <ul class="branch-2">
+                        @foreach($child->childs as $grand)
+                        <li>
+                            {{ $grand->profileLink() }}
+                            <ul class="branch-2">
+                                @foreach($grand->childs as $gg)
+                                <li>
+                                    {{ $gg->profileLink() }}
+                                </li>
+                                @endforeach
+                            </ul>
+                        </li>
+                        @endforeach
+                    </ul>
+                </li>
+                @endforeach
+            </ul>
+        </li>
+    </ul>
+    <div class="clearfix"></div>
+</div>
+@endsection
+
+@section ('ext_css')
+<link rel="stylesheet" href="{{ asset('css/tree.css') }}">
+@endsection

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');