From 906834a13ed6eed1d575f7920524b68bba6131c2 Mon Sep 17 00:00:00 2001 From: rojsiroj Date: Wed, 17 Apr 2024 06:06:01 +0700 Subject: [PATCH] feat: add vertical tree option in family tree --- app/Http/Controllers/UsersController.php | 17 ++- public/css/{tree.css => tree-horizontal.css} | 0 public/css/tree-vertical.css | 103 ++++++++++++++++ public/css/tree2.css | 103 ---------------- resources/lang/en/app.php | 2 + resources/lang/id/app.php | 3 +- resources/lang/ur/app.php | 2 + resources/views/layouts/family-tree.blade.php | 10 ++ .../users/partials/action-buttons.blade.php | 2 +- .../partials/family-tree-buttons.blade.php | 4 + ...ee.blade.php => tree-horizontal.blade.php} | 23 ++-- resources/views/users/tree-vertical.blade.php | 113 ++++++++++++++++++ resources/views/users/tree2.blade.php | 57 --------- routes/web.php | 3 +- 14 files changed, 263 insertions(+), 179 deletions(-) rename public/css/{tree.css => tree-horizontal.css} (100%) create mode 100644 public/css/tree-vertical.css delete mode 100644 public/css/tree2.css create mode 100644 resources/views/layouts/family-tree.blade.php create mode 100644 resources/views/users/partials/family-tree-buttons.blade.php rename resources/views/users/{tree.blade.php => tree-horizontal.blade.php} (81%) create mode 100644 resources/views/users/tree-vertical.blade.php delete mode 100644 resources/views/users/tree2.blade.php diff --git a/app/Http/Controllers/UsersController.php b/app/Http/Controllers/UsersController.php index f825893..afbe9dc 100644 --- a/app/Http/Controllers/UsersController.php +++ b/app/Http/Controllers/UsersController.php @@ -89,14 +89,25 @@ public function chart(User $user) } /** - * Show user family tree. + * Show user family tree vertically. * * @param \App\User $user * @return \Illuminate\View\View */ - public function tree(User $user) + public function treeVertical(User $user) { - return view('users.tree', compact('user')); + return view('users.tree-vertical', compact('user')); + } + + /** + * Show user family tree horizontally. + * + * @param \App\User $user + * @return \Illuminate\View\View + */ + public function treeHorizontal(User $user) + { + return view('users.tree-horizontal', compact('user')); } /** diff --git a/public/css/tree.css b/public/css/tree-horizontal.css similarity index 100% rename from public/css/tree.css rename to public/css/tree-horizontal.css diff --git a/public/css/tree-vertical.css b/public/css/tree-vertical.css new file mode 100644 index 0000000..556b6d3 --- /dev/null +++ b/public/css/tree-vertical.css @@ -0,0 +1,103 @@ +/*Now the CSS*/ +* {margin: 0; padding: 0;} + +.tree ul { + padding-top: 20px; position: relative; + + transition: all 0.5s; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; +} + +.tree li { + float: left; text-align: center; + list-style-type: none; + position: relative; + padding: 20px 5px 0 5px; + + transition: all 0.5s; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; +} + +/*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: 2px solid #ccc; + width: 50%; height: 20px; +} +.tree li::after{ + right: auto; left: 50%; + border-left: 2px 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: none; +} + +/*Remove space from the top of single children*/ +.tree li:only-child{ padding-top: 0; float: none;} + +/*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; +} +/*Adding back the vertical connector to the last nodes*/ +.tree li:last-child::before{ + border-right: 2px 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; +} + +/*Time to add downward connectors from parents*/ +.tree ul ul::before{ + content: ''; + position: absolute; top: 0; left: 50%; + border-left: 2px solid #ccc; + width: 0; height: 20px; +} + +.tree li a{ + border: 2px solid #ccc; + font-size: 12px; + font-weight: bold; + padding: 5px 10px; + text-decoration: none; + font-family: arial, verdana, tahoma; + display: inline-block; + + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + + transition: all 0.5s; + -webkit-transition: all 0.5s; + -moz-transition: all 0.5s; +} + +/*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: 2px 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/public/css/tree2.css b/public/css/tree2.css deleted file mode 100644 index 1fc06e0..0000000 --- a/public/css/tree2.css +++ /dev/null @@ -1,103 +0,0 @@ -/*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 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; -} - -/*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; -} - -/*We need to remove left-right connectors from elements without -any siblings*/ -.tree li:only-child::after, .tree li:only-child::before { - display: none; -} - -/*Remove space from the top of single children*/ -.tree 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; -} -/*Adding back the vertical connector to the last nodes*/ -.tree 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; -} - -/*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 li a{ - border: 1px solid #ccc; - padding: 4px 6px; - 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/lang/en/app.php b/resources/lang/en/app.php index fb6ef17..3b95290 100644 --- a/resources/lang/en/app.php +++ b/resources/lang/en/app.php @@ -30,6 +30,8 @@ 'show_profile' => 'Show Profile', 'show_family_chart' => 'Show Family Chart', 'show_family_tree' => 'Show Family Tree', + 'horizontal' => 'Horizontal', + 'vertical' => 'Vertical', 'show_marriages' => 'Show Marriages', 'enter_new_name' => 'Enter new Name...', 'select_from_existing_males' => 'Select from Existing Males', diff --git a/resources/lang/id/app.php b/resources/lang/id/app.php index cfbf474..b0946c2 100644 --- a/resources/lang/id/app.php +++ b/resources/lang/id/app.php @@ -28,8 +28,9 @@ 'edit' => 'Edit', 'update' => 'Update', 'show_profile' => 'Lihat Profil', - 'show_family_chart' => 'Lihat Bagan Keluarga', 'show_family_tree' => 'Lihat Pohon Keluarga', + 'horizontal' => 'Horisontal', + 'vertical' => 'Vertikal', 'show_marriages' => 'Lihat Pernikahan', 'enter_new_name' => 'Input Nama Baru...', 'select_from_existing_males' => 'Pilih dari Pria terdaftar', diff --git a/resources/lang/ur/app.php b/resources/lang/ur/app.php index 3309ef3..a4890ed 100644 --- a/resources/lang/ur/app.php +++ b/resources/lang/ur/app.php @@ -30,6 +30,8 @@ 'show_profile' => 'پروفائل دیکھیں', 'show_family_chart' => 'خاندان کا چارٹ دیکھیں', 'show_family_tree' => 'شجرہ نصب دیکھیں', + 'horizontal' => 'أفقياً', + 'vertical' => 'عموديًا', 'show_marriages' => 'شادیاں دیکھیں', 'enter_new_name' => 'نیا نام درج کریں۔۔۔', 'select_from_existing_males' => 'موجودہ مردوں میں سے منتخب کریں', diff --git a/resources/views/layouts/family-tree.blade.php b/resources/views/layouts/family-tree.blade.php new file mode 100644 index 0000000..dd947d6 --- /dev/null +++ b/resources/views/layouts/family-tree.blade.php @@ -0,0 +1,10 @@ +@extends('layouts.user-profile-wide') + +@section('subtitle', trans('app.family_tree')) + +@section('user-content') + @include('users.partials.family-tree-buttons', ['user' => $user]) +
+ @yield('family-tree-content') +
+@endsection diff --git a/resources/views/users/partials/action-buttons.blade.php b/resources/views/users/partials/action-buttons.blade.php index 691370a..32b1391 100644 --- a/resources/views/users/partials/action-buttons.blade.php +++ b/resources/views/users/partials/action-buttons.blade.php @@ -4,7 +4,7 @@ @endcan {{ link_to_route('users.show', trans('app.show_profile').' '.$user->name, [$user->id], ['class' => Request::segment(3) == null ? 'btn btn-default active' : 'btn btn-default']) }} {{ link_to_route('users.chart', trans('app.show_family_chart'), [$user->id], ['class' => Request::segment(3) == 'chart' ? 'btn btn-default active' : 'btn btn-default']) }} - {{ link_to_route('users.tree', trans('app.show_family_tree'), [$user->id], ['class' => Request::segment(3) == 'tree' ? 'btn btn-default active' : 'btn btn-default']) }} + {{ link_to_route(Request::segment(4) == 'vertical' ? 'users.tree-vertical' : 'users.tree-horizontal', trans('app.show_family_tree'), [$user->id], ['class' => Request::segment(3) == 'tree' ? 'btn btn-default active' : 'btn btn-default']) }} {{ link_to_route('users.marriages', trans('app.show_marriages'), [$user->id], ['class' => Request::segment(3) == 'marriages' ? 'btn btn-default active' : 'btn btn-default']) }} @if ($user->yod) {{ link_to_route('users.death', trans('user.death'), [$user->id], ['class' => Request::segment(3) == 'death' ? 'btn btn-default active' : 'btn btn-default']) }} diff --git a/resources/views/users/partials/family-tree-buttons.blade.php b/resources/views/users/partials/family-tree-buttons.blade.php new file mode 100644 index 0000000..fc70537 --- /dev/null +++ b/resources/views/users/partials/family-tree-buttons.blade.php @@ -0,0 +1,4 @@ +
+ {{ link_to_route('users.tree-horizontal', trans('app.horizontal'), [$user->id], ['class' => Request::segment(3) == 'tree' && Request::segment(4) == 'horizontal' ? 'btn btn-default active' : 'btn btn-default']) }} + {{ link_to_route('users.tree-vertical', trans('app.vertical'), [$user->id], ['class' => Request::segment(3) == 'tree' && Request::segment(4) == 'vertical' ? 'btn btn-default active' : 'btn btn-default']) }} +
diff --git a/resources/views/users/tree.blade.php b/resources/views/users/tree-horizontal.blade.php similarity index 81% rename from resources/views/users/tree.blade.php rename to resources/views/users/tree-horizontal.blade.php index 5ab4c35..2baa1c0 100644 --- a/resources/views/users/tree.blade.php +++ b/resources/views/users/tree-horizontal.blade.php @@ -1,9 +1,6 @@ -@extends('layouts.user-profile-wide') - -@section('subtitle', trans('app.family_tree')) - -@section('user-content') +@extends('layouts.family-tree') +@section('family-tree-content')
- {{ link_to_route('users.tree', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }} + {{ link_to_route('users.tree-horizontal', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }} @if ($childsCount = $user->childs->count())
@foreach($user->childs as $child)
- {{ link_to_route('users.tree', $child->name, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }} + {{ link_to_route('users.tree-horizontal', $child->name, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }} @if ($grandsCount = $child->childs->count())
@foreach($child->childs as $grand)
- {{ link_to_route('users.tree', $grand->name, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }} + {{ link_to_route('users.tree-horizontal', $grand->name, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }} @if ($ggCount = $grand->childs->count())
@foreach($grand->childs as $gg)
- {{ link_to_route('users.tree', $gg->name, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }} + {{ link_to_route('users.tree-horizontal', $gg->name, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }} @if ($ggcCount = $gg->childs->count())
@foreach($gg->childs as $ggc)
- {{ link_to_route('users.tree', $ggc->name, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }} + {{ link_to_route('users.tree-horizontal', $ggc->name, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }} @if ($ggccCount = $ggc->childs->count())
@foreach($ggc->childs as $ggcc)
- {{ link_to_route('users.tree', $ggcc->name, [$ggcc->id], ['title' => $ggcc->name.' ('.$ggcc->gender.')']) }} + {{ link_to_route('users.tree-horizontal', $ggcc->name, [$ggcc->id], ['title' => $ggcc->name.' ('.$ggcc->gender.')']) }} @if ($udhegCount = $ggcc->childs->count())
@foreach($ggcc->childs as $udheg)
- {{ link_to_route('users.tree', $udheg->name, [$udheg->id], ['title' => $udheg->name.' ('.$udheg->gender.')']) }} + {{ link_to_route('users.tree-horizontal', $udheg->name, [$udheg->id], ['title' => $udheg->name.' ('.$udheg->gender.')']) }}
@endforeach
@@ -107,5 +104,5 @@ @endsection @section ('ext_css') - + @endsection diff --git a/resources/views/users/tree-vertical.blade.php b/resources/views/users/tree-vertical.blade.php new file mode 100644 index 0000000..d213f77 --- /dev/null +++ b/resources/views/users/tree-vertical.blade.php @@ -0,0 +1,113 @@ +@extends('layouts.family-tree') + +@section('family-tree-content') + + +
+
    +
  • + {{ link_to_route('users.tree-vertical', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }} + @if ($childsCount = $user->childs->count()) + +
      + @foreach($user->childs as $child) +
    • + {{ link_to_route('users.tree-vertical', $child->name, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }} + @if ($grandsCount = $child->childs->count()) + +
        + @foreach($child->childs as $grand) +
      • + {{ link_to_route('users.tree-vertical', $grand->name, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }} + @if ($ggCount = $grand->childs->count()) + +
          + @foreach($grand->childs as $gg) +
        • + {{ link_to_route('users.tree-vertical', $gg->name, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }} + @if ($ggcCount = $gg->childs->count()) + +
            + @foreach($gg->childs as $ggc) +
          • + {{ link_to_route('users.tree-vertical', $ggc->name, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }} + @if ($ggccCount = $ggc->childs->count()) + +
              + @foreach($ggc->childs as $ggcc) +
            • + {{ link_to_route('users.tree-vertical', $ggcc->name, [$ggcc->id], ['title' => $ggcc->name.' ('.$ggcc->gender.')']) }} + @if ($udhegCount = $ggcc->childs->count()) + +
                + @foreach($ggcc->childs as $udheg) +
              • + {{ link_to_route('users.tree-vertical', $udheg->name, [$udheg->id], ['title' => $udheg->name.' ('.$udheg->gender.')']) }} +
                • + @endforeach +
              + @endif +
              • + @endforeach +
            + @endif +
            • + @endforeach +
          + @endif +
          • + @endforeach +
        + @endif +
        • + @endforeach +
      + @endif +
      • + @endforeach +
    + @endif +
    • +
+
+
+
+
+ @if ($childsTotal) +
{{ trans('app.child_count') }}
+
{{ $childsTotal }}
+ @endif + @if ($grandChildsTotal) +
{{ trans('app.grand_child_count') }}
+
{{ $grandChildsTotal }}
+ @endif + @if ($ggTotal) +
Jumlah Cicit
+
{{ $ggTotal }}
+ @endif + @if ($ggcTotal) +
Jumlah Canggah
+
{{ $ggcTotal }}
+ @endif + @if ($ggccTotal) +
Jumlah Wareng
+
{{ $ggccTotal }}
+ @endif + @if ($udhegTotal) +
Jumlah Udheg2
+
{{ $udhegTotal }}
+ @endif +
+
+@endsection + +@section ('ext_css') + +@endsection diff --git a/resources/views/users/tree2.blade.php b/resources/views/users/tree2.blade.php deleted file mode 100644 index 4b24060..0000000 --- a/resources/views/users/tree2.blade.php +++ /dev/null @@ -1,57 +0,0 @@ -@extends('layouts.user-profile-wide') - -@section('subtitle', trans('app.family_tree')) - -@section('user-content') - -
-
    -
  • - {{ link_to_route('users.tree', $user->name, [$user->id], ['title' => $user->name.' ('.$user->gender.')']) }} - @if ($user->childs->count()) -
      - @foreach($user->childs as $child) -
    • - {{ link_to_route('users.tree', $child->id, [$child->id], ['title' => $child->name.' ('.$child->gender.')']) }} - @if ($child->childs->count()) -
        - @foreach($child->childs as $grand) -
      • - {{ link_to_route('users.tree', $grand->id, [$grand->id], ['title' => $grand->name.' ('.$grand->gender.')']) }} - @if ($grand->childs->count()) -
          - @foreach($grand->childs as $gg) -
        • - {{ link_to_route('users.tree', $gg->id, [$gg->id], ['title' => $gg->name.' ('.$gg->gender.')']) }} - childs->count()) -
            - @foreach($gg->childs as $ggc) -
          • - {{ link_to_route('users.tree', $ggc->id, [$ggc->id], ['title' => $ggc->name.' ('.$ggc->gender.')']) }} -
            • - @endforeach -
          - @endif - */ ?> -
          • - @endforeach -
        - @endif -
        • - @endforeach -
      - @endif -
      • - @endforeach -
    - @endif -
    • -
-
-
-@endsection - -@section ('ext_css') - -@endsection diff --git a/routes/web.php b/routes/web.php index 0ac42b5..62db5d2 100644 --- a/routes/web.php +++ b/routes/web.php @@ -47,7 +47,8 @@ Route::get('users/{user}/edit', 'edit')->name('users.edit'); Route::patch('users/{user}', 'update')->name('users.update'); Route::get('users/{user}/chart', 'chart')->name('users.chart'); - Route::get('users/{user}/tree', 'tree')->name('users.tree'); + Route::get('users/{user}/tree/vertical', 'treeVertical')->name('users.tree-vertical'); + Route::get('users/{user}/tree/horizontal', 'treeHorizontal')->name('users.tree-horizontal'); Route::get('users/{user}/death', 'death')->name('users.death'); Route::patch('users/{user}/photo-upload', 'photoUpload')->name('users.photo-upload'); Route::delete('users/{user}', 'destroy')->name('users.destroy');