Recipes/resources/views/recipes/index.blade.php

92 lines
3.2 KiB
PHP

@extends('layouts.default')
@extends('content_wrappers.md-12')
@section('title', '| Recipes')
@section('heading', 'Recipes')
@section('content')
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Categories</th>
<th>Created By</th>
@if(Auth::user())
<th>Operations</th>
@endif
</tr>
</thead>
<tbody id="filteredTable">
<tr>
<td><input id="nameFilter" class="filter form-control" type="text" placeholder="Search.."></td>
<td><input id="categoryFilter" class="filter form-control" type="text" placeholder="Search.."></td>
<td><input id="authorFilter" class="filter form-control" type="text" placeholder="Search.."></td>
@if(Auth::user())
<td class='operations'></td>
@endif
</tr>
@foreach ($recipes as $recipe)
<tr class="rows">
<td class="name"><a href="{{ route('recipes.show', $recipe->id) }}">{{ $recipe->name }}</a></td>
<td class="categories">
@foreach ($recipe->categories as $category)
{{ $category->name }}
@endforeach
</td>
<td class="author">{{ $recipe->author }}</td>
@if(Auth::user())
<td>
@if(in_array('EditRecipe',$allperms) || $recipe->user_id == Auth::user()->id)
<a href="{{ route('recipes.edit', $recipe->id) }}" class="btn btn-info pull-left" style="margin-right: 3px;">Edit</a>
@endif
@if(in_array('DeleteRecipe',$allperms) || $recipe->user_id == Auth::user()->id)
{!! Form::open(['method' => 'DELETE', 'route' => ['recipes.destroy', $recipe->id] ]) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}
@endif
</td>
@endif
</tr>
@endforeach
</tbody>
</table>
</div>
@if(Auth::user())
<a href="{{ route('recipes.create') }}" class="btn btn-success">Create New Recipe</a>
@endif
@endsection
@section('scripts')
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
var categories = @json($categories);
$(document).on("click",function(){filter();});
$(".filter").on("input", function() {filter();});
function filter(){
var name = $("#nameFilter").val().toLowerCase();
var category = $("#categoryFilter").val().toLowerCase();
var author = $("#authorFilter").val().toLowerCase();
$("#filteredTable tr.rows").filter(function() {
matchname=$(".name",this).text().toLowerCase().indexOf(name) > -1;
matchcategory=$(".categories",this).text().toLowerCase().indexOf(category) > -1;
matchauthor=$(".author",this).text().toLowerCase().indexOf(author) > -1;
$(this).toggle(matchname && matchcategory && matchauthor);
});
}
$("#categoryFilter").autocomplete({
source: categories
});
});
</script>
@endsection
@section('styles')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@endsection