maps-theme/content/index.blade.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