Added list.js search for boards

README.md

@@ -8,7 +8,7 @@
 0. ~~Board Owner Permissions~~
 0. ~~Subscribe/Unsubscribe to Board~~
 0. ~~Notifications to Subscribers~~
-0. Associations/Guilds/Branches/Districts
+0. ~~Associations/Guilds/Branches/Districts~~
 0. Browse/Search Boards
 0. Committee Page
 0. Contact Page

app/Http/Controllers/BoardController.php

@@ -20,7 +20,7 @@ public function __construct()
      */
     public function index()
     {
-        $boards = Board::all();
+        $boards = Board::orderBy('name')->get();
         return view('boards.list', compact('boards'));
     }
 

composer.json

@@ -9,6 +9,7 @@
     "license": "MIT",
     "require": {
         "php": "^7.1.3",
+        "bensampo/laravel-enum": "^1.19",
         "fideloper/proxy": "^4.0",
         "laravel/framework": "5.8.*",
         "laravel/tinker": "^1.0"

package.json

@@ -28,6 +28,7 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "list.js": "^1.5.0",
         "selectize": "^0.12.6"
     }
 }

resources/js/app.js

@@ -6,6 +6,7 @@
 
 require('./bootstrap');
 require('selectize');
+window.List = require('list.js');
 
 window.Vue = require('vue');
 

resources/sass/app.scss

@@ -30,8 +30,11 @@ body {
 }
 
 #sidebar-wrapper .sidebar-heading {
-    padding: 0.875rem 1.25rem;
+    padding: 1.875rem 1.25rem;
     font-size: 1.2rem;
+    height:80px;
+    text-align: center;
+    vertical-align: middle;
 }
 
 #sidebar-wrapper .list-group {
@@ -61,6 +64,14 @@ body {
     }
 }
 
+.navbar {
+    height: 80px;
+}
+
+#app {
+    padding-top: 20px;
+}
+
 .selectize-control.tb-dropdown {
 
     width: 100%;

resources/views/boards/create.blade.php

@@ -1,9 +1,7 @@
-@extends('layouts.app')
+@extends('layouts.app', ['title' => 'Create Board'])
 
 @section('content')
 
-    <h1 class="mt-4">Create Board</h1>
-
     <div class="container">
         <form method="POST" action="/boards">
             @csrf

resources/views/boards/edit.blade.php

@@ -1,9 +1,7 @@
-@extends('layouts.app')
+@extends('layouts.app', ['title' => 'Edit Board'])
 
 @section('content')
 
-    <h1 class="mt-4">Edit Board</h1>
-
     <div class="container">
         <form method="POST" action="{{ route('boards.update', [ 'board' => $board->id ]) }}">
             @method('PATCH')

resources/views/boards/list.blade.php

@@ -1,17 +1,53 @@
-@extends('layouts.app')
+@extends('layouts.app', ['title' => 'Boards'])
 
 @section('content')
 
-    <h1 class="mt-4">Boards</h1>
+    <div id="boards-list">
 
-    <ul>
-    @foreach($boards as $board)
-        <li><a href="/boards/{{ $board->id }}">{{ $board->name }}</a></li>
-    @endforeach
-    </ul>
+        <h2>Search</h2>
+        <input class="search" placeholder="search" />
+        <input type="radio" name="type" id="type-tower" value="tower" /> Tower
+        <input type="radio" name="type" id="type-guild" value="guild" /> Guild
+
+        <h2>Boards</h2>
+        <ul class="list">
+        @foreach($boards as $board)
+            <li data-type="{{ $board->tower ? 'tower' : 'guild' }}">
+                <span class="tower-item">
+                @if($board->tower)
+                    @include('macros.tower', ['tower' => $board->tower, 'url' => route('boards.show', ['board' => $board->id])])
+                @elseif($board->guild)
+                    <a href="/boards/{{ $board->id }}">{{ $board->guild->name }}</a>
+                    @else
+                    <a href="/boards/{{ $board->id }}">{{ $board->name }}</a>
+                @endif
+                </span>
+            </li>
+        @endforeach
+        </ul>
+
+    </div>
 
     @auth
         <a class="btn btn-primary" id="menu-toggle" href="/boards/create">Create</a>
     @endauth
 
 @endsection
+
+@section('pagescripts')
+
+    <script>
+        var options = {
+            valueNames: [ 'tower-item', { data: ['type'] } ]
+        };
+        var boardList = new List('boards-list', options);
+        $('input[name=type]').change(function() {
+            $boardType = $('input[name=type]:checked').val();
+            boardList.filter(function(item) {
+                console.log(item.values().type + " = " + $boardType);
+                return $boardType === item.values().type;
+            });
+        });
+    </script>
+
+@endsection

resources/views/boards/show.blade.php

@@ -1,8 +1,7 @@
-@extends('layouts.app')
+@extends('layouts.app', ['title' => $board->name])
 
 @section('content')
 
-    <h1 class="mt-4">{{ $board->name }}</h1>
     @if($board->tower)
         <p>{!! $board->tower->getNameHTML() !!}</p>
         @if($board->guild)

resources/views/layouts/app.blade.php

@@ -6,7 +6,7 @@
 
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>{{ config('app.name') }}</title>
+        <title>{{ config('app.name') }}: {{ isset($title) ? $title : '' }}</title>
 
         <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
         <link rel="stylesheet" href="{{ mix('/css/vendor.css') }}">
@@ -18,17 +18,20 @@
 
             <!-- Sidebar -->
             <div class="bg-light border-right" id="sidebar-wrapper">
-            <div class="sidebar-heading"><a href="/">Towerboard</a></div>
-            <div class="list-group list-group-flush">
-                <a href="/boards" class="list-group-item list-group-item-action bg-light">Boards</a>
-            </div>
+                <div class="sidebar-heading"><a href="/">Towerboard</a></div>
+                <div class="list-group list-group-flush">
+                    <a href="/boards" class="list-group-item list-group-item-action bg-light">Boards</a>
+                </div>
             </div>
             <!-- /#sidebar-wrapper -->
 
             <!-- Page Content -->
             <div id="page-content-wrapper">
 
                 <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
+
+                    <h1 class="mt-4">{{ isset($title) ? $title : '' }}</h1>
+
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                         <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                         @guest

resources/views/macros/tower.blade.php

@@ -0,0 +1,9 @@
+@if($url)
+    <a href="{{ $url }}"><strong>{{ $tower->town }}</strong></a>,
+@else
+    {{ $tower->town }},
+@endif
+{{ $tower->county }} ({{ $tower->country }}), {{ $tower->dedication }}
+{{ $tower->area ? ', ' . $tower->area : '' }},
+<strong>{{ $tower->num_bells }}</strong>
+{{ $tower->weight ? ', ' . $tower->weight : '' }}

resources/views/notices/edit.blade.php

@@ -1,9 +1,7 @@
-@extends('layouts.app')
+@extends('layouts.app', ['title' => 'Edit Notice'])
 
 @section('content')
 
-    <h1 class="mt-4">Edit Notice</h1>
-
     <div class="container">
         <form method="POST" action="{{ route('notices.update', [ 'board' => $notice->board->id, 'notice' => $notice->id ]) }}">
             @method('PATCH')

resources/views/notices/show.blade.php

@@ -1,9 +1,7 @@
-@extends('layouts.app')
+@extends('layouts.app', ['title' => $notice->title])
 
 @section('content')
 
-    <h1 class="mt-4">{{ $notice->title }}</h1>
-
     <p>{{ $notice->body }}</p>
 
     <a href="{{ route('notices.edit', [ 'board' => $notice->board->id, 'notice' => $notice->id ]) }}" class="btn btn-primary">Edit</a>

resources/views/users/edit.blade.php

@@ -1,9 +1,7 @@
-@extends('layouts.app')
+@extends('layouts.app', ['title' => 'Account Details'])
 
 @section('content')
 
-    <h1 class="mt-4">Account Details</h1>
-
     <div class="container">
         <form method="POST" action="{{ route('accounts.update') }}">
             @method('PATCH')

resources/views/welcome.blade.php

@@ -1,7 +1,5 @@
- @extends('layouts.app')
+ @extends('layouts.app', ['title' => 'Welcome!'])
 
 @section('content')
 
-    <h1 class="mt-4">Welcome!</h1>
-
 @endsection

routes/web.php

@@ -10,26 +10,20 @@
 | contains the "web" middleware group. Now create something great!
 |
 */
-
 Auth::routes(['verify' => true]);
+Route::get('/account', 'UserController@edit')->name('accounts.edit')->middleware('verified');
+Route::patch('/account', 'UserController@update')->name('accounts.update')->middleware('verified');
 
 Route::get('/', function () {
     return view('welcome');
 })->name('home');
 
-Route::resource('/boards', 'BoardController')->middleware('verified');
-Route::resource('/api/guilds', 'GuildController')->middleware('verified');
-Route::resource('/api/towers', 'TowerController')->middleware('verified');
-
-Route::resource('/boards/{board}/notices', 'NoticeController')->middleware('verified');
-Route::get('/boards/{board}/notices/{notice}/mail', 'NoticeController@mail')->middleware('verified');
-
-Route::post('/boards/{board}/subscriptions', 'SubscriptionController@store')->name('subscriptions.store')->middleware('verified');
-Route::delete('/boards/{board}/subscriptions', 'SubscriptionController@destroy')->name('subscriptions.destroy')->middleware('verified');
-
-Route::get('/account', 'UserController@edit')->name('accounts.edit')->middleware('verified');
-Route::patch('/account', 'UserController@update')->name('accounts.update')->middleware('verified');
+Route::resource('/api/guilds', 'GuildController');
+Route::resource('/api/towers', 'TowerController');
 
-Auth::routes();
+Route::resource('/boards', 'BoardController');
+Route::resource('/boards/{board}/notices', 'NoticeController');
+Route::get('/boards/{board}/notices/{notice}/mail', 'NoticeController@mail');
 
-Route::get('/home', 'HomeController@index')->name('home');
+Route::post('/boards/{board}/subscriptions', 'SubscriptionController@store')->name('subscriptions.store');
+Route::delete('/boards/{board}/subscriptions', 'SubscriptionController@destroy')->name('subscriptions.destroy');

webpack.mix.js

@@ -12,7 +12,7 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
-        .extract(['vue', 'bootstrap', 'selectize']);
+        .extract(['vue', 'bootstrap', 'selectize', 'list.js']);
 
 mix.sass('resources/sass/app.scss', 'public/css/app.css');
 mix.less('node_modules/selectize/dist/less/selectize.less', 'public/css/vendor.css');