148 lines
8.0 KiB
PHP
148 lines
8.0 KiB
PHP
@extends('template.'.config('settings.template').'.content.master')
|
|
@section('head')
|
|
<title>Home | {{config('settings.name')}}</title>
|
|
<style>
|
|
#map {
|
|
height: 80vh;
|
|
width: 100%;
|
|
}
|
|
.address + .address{
|
|
margin-top: .5rem;
|
|
}
|
|
#marker-window{
|
|
min-width: 100px;
|
|
}
|
|
#contents {
|
|
scrollbar-color: #aaa #f5f5f5;
|
|
}
|
|
|
|
#contents::-webkit-scrollbar {
|
|
width: 8px;
|
|
border-radius: 10px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
#contents::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: #aaa;
|
|
}
|
|
|
|
#contents::-webkit-scrollbar-thumb:hover {
|
|
background-color: #888;
|
|
}
|
|
|
|
.address{
|
|
cursor: pointer;
|
|
transition: all .2s;
|
|
}
|
|
.address:hover{
|
|
background: #eee;
|
|
}
|
|
</style>
|
|
@stop
|
|
@section('content')
|
|
<div class="container py-5">
|
|
<div class="row mb-5 mt-3">
|
|
<div class="col-12">
|
|
<h1>{{config('settings.name')}}</h1>
|
|
<p class="mt-3">{{config('settings.description')}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-md rounded-end">
|
|
<div class="d-flex">
|
|
<div id="filters" class="d-flex">
|
|
<template id="filter">
|
|
<div class="dropdown me-2 filter">
|
|
<button class="btn btn-primary dropdown-toggle btn-sm bg-light" style="color: #212529; background: #e9ecef; border: 1px solid #ced4da;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
<span class="filter-name"></span> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu checkbox-menu allow-focus p-2 filter-options"></ul>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="flex-fill me-2" style="max-width: 400px;">
|
|
<input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/>
|
|
</div>
|
|
<div class="input-group flex-fill me-2" style="max-width: 400px;">
|
|
<input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche">
|
|
<button class="input-group-text bg-primary text-light" id="search-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 d-flex">
|
|
<div class="d-flex">
|
|
<div id="applied-filters" class="d-flex">
|
|
<template id="applied-filter">
|
|
<button class="btn btn-sm btn-primary me-2 btn applied-filter d-none">
|
|
<span class="filter-name"></span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
<button class="btn btn-sm btn-primary me-2 btn applied-filter" data-field="ort" style="display: none;">
|
|
<span class="filter-name"></span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-sm btn-primary me-2 btn applied-filter" data-field="search" style="display: none;">
|
|
<span class="filter-name"></span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button id="reset-filters-button" class="btn btn-danger btn-sm ms-1" style="display: none;">Alle löschen</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-auto pe-0 d-flex align-items-end">
|
|
<p class="text-end text-muted small m-0 p-0"><span id="count-items-displayed">0</span> results</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-md-8 g-0 ps-md-3 order-md-last">
|
|
<div id="map"></div>
|
|
<div id="marker-window" class="d-none">
|
|
<h6 id="firstHeading" class="firstHeading">$title</h6>
|
|
<div id="bodyContent">
|
|
<img class="img-fluid rounded" data-src="$image" alt="">
|
|
<p>$description</p>
|
|
<a data-href="$path" style="outline: none;">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 overflow-auto mt-3 mt-md-0" style="height: 80vh;" id="contents">
|
|
<div class="card d-none address shadow-sm ">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-12 col-md-5">
|
|
<img class="img-fluid rounded" data-src="$image" alt="">
|
|
</div>
|
|
<div class="col-12 col-md-7">
|
|
<h4 class="fs-6 mt-2 fw-bolder">$title</h4>
|
|
<p class="mt-2 text-muted small postal-code"> <svg style="fill: #ea4335; width: 10px; margin-right: 4px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z"/></svg>$postalCode</p>
|
|
<div style="gap: .25rem;" class="d-flex tags"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
|
|
<script>
|
|
const urlBase = "{{url('/')}}";
|
|
const type = "{{$_type}}";
|
|
const locationField = "{{$_location_field}}";
|
|
const tagField = "{{$_tags_field??''}}";
|
|
let filterFields = {!! json_encode($_filter_fields) !!};
|
|
</script>
|
|
<script src="{{storage('assets/home/script.js')}}"></script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script>
|
|
@stop |