From 1507505ddf0984214f968e4c68967ff1f15866b8 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Tue, 1 Aug 2023 18:28:23 -0300
Subject: [PATCH] .

---
 assets/home/script.js              | 18 +++++++++---------
 content/contents/default.blade.php | 24 ++++--------------------
 content/index.blade.php            | 21 ++++++++++++---------
 3 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/assets/home/script.js b/assets/home/script.js
index bbb8ea1..e576c5e 100644
--- a/assets/home/script.js
+++ b/assets/home/script.js
@@ -52,9 +52,9 @@ $(function () {
 function initMap() {
     function createInfowindowElement(item) {
         let infowindowElement = $("#marker-window").clone();
-        infowindowElement.html(infowindowElement.html().replace('$title', item.title));
-        infowindowElement.html(infowindowElement.html().replace('$description', item.description ?? ''));
-        infowindowElement.find(".path").attr("href", item.path);
+        infowindowElement.find(".js-title").text(item.title);
+        infowindowElement.find(".js-description").text(item.description ?? '');
+        infowindowElement.find(".js-path").attr("href", item.path);
         infowindowElement.removeClass('d-none');
         return infowindowElement[0].outerHTML;
     }
@@ -141,18 +141,18 @@ function initMap() {
         $("#contents").empty();
         showedItems.forEach(function (item) {
             let locationElement = locationElementTemplate.clone();
-            locationElement.html(locationElement.html().replace('$title', item.title));
-            locationElement.html(locationElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
-            locationElement.find(".path").attr("href", item.path);
+            locationElement.find(".js-title").text(item.title);
+            locationElement.find(".js-image").attr("src", item.image);
+            locationElement.find(".js-path").attr("href", item.path);
 
             let location = item[textToSlug(locationField)];
-            if (location && location.postalCode) locationElement.html(locationElement.html().replace('$postalCode', (location.postalCode + " " + (location.addressLocality ?? "")).trim()));
-            else locationElement.find(".postal-code").hide();
+            if (location && location.postalCode) locationElement.find(".js-postal-code").text((location.postalCode + " " + (location.addressLocality ?? "")).trim());
+            else locationElement.find(".js-postal-code").hide();
 
             locationElement.removeClass('d-none');
 
             if (item[textToSlug(tagField)] && Array.isArray(item[textToSlug(tagField)])) item[textToSlug(tagField)].slice(0, 2).forEach(function (besonderheitenItem) {
-                locationElement.find(".tags").append(`<span class="badge text-bg-secondary">${besonderheitenItem}</span>`);
+                locationElement.find(".js-tags").append(`<span class="badge text-bg-secondary">${besonderheitenItem}</span>`);
             });
 
             locationElement.on('click', function () {
diff --git a/content/contents/default.blade.php b/content/contents/default.blade.php
index eadba94..180d9a4 100644
--- a/content/contents/default.blade.php
+++ b/content/contents/default.blade.php
@@ -1,7 +1,6 @@
 @extends('template.'.config('settings.template').'.content.master')
 @section('head')
     <title>{{$content->title}} | {{config('settings.name')}}</title>
-
 @stop
 @section('content')
     <div class="container">
@@ -9,44 +8,29 @@
             <div class="col-12 mt-4">
                 <a href="{{url('/')}}"> ← Back</a>
             </div>
-
             <div class="col-12 mt-4 mb-4">
-
                 <h1>{{$content->title}}</h1>
-
-
             </div>
-
             <div class="col-12 col-md-4">
                 <img src="{{$content->image()}}" class="img-fluid rounded" alt="Bild {{$content->title}}">
-
             </div>
-
             <div class="col-12 col-md-7 offset-md-1 fs-4">
-
-                {!!$content->beschreibung!!}
-
-
+                {!!$content->{$_description_fielda??''}!!}
             </div>
-
         </div>
-
-        @if($content->bilder)
+        @if(isset($_images_field) && $content->{$_images_field})
             <div class="row">
                 <div class="col-12 mt-4 mb-2">
                     <h2>Bilder</h2>
                 </div>
-    
-                @foreach($content->bilder as $bild)
+                @foreach($content->{$_images_field} as $bild)
                     <div class="col-12 col-md-3 mb-4">
-                        <img src="{{$bild}}" class="img-fluid rounded">
+                        <x-img src="{{$bild}}" class="img-fluid rounded"/>
                     </div>
                 @endforeach
-            
                 <div class="col-3"></div>
             </div>
         @endif
-
     </div>
     <script>
         const contentUrl = "{{url('/api/contents/'.$content->id)}}";
diff --git a/content/index.blade.php b/content/index.blade.php
index b2f7963..381763d 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -109,11 +109,11 @@
             <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 href="" class="path" style="outline: none;">Details</a>
+                    <h6 class="js-title"></h6>
+                    <div>
+                        <img class="img-fluid rounded js-image" src="" alt="">
+                        <p class="js-description"></p>
+                        <a href="" class="js-path" style="outline: none;">Details</a>
                     </div>
                 </div>
             </div>
@@ -122,12 +122,15 @@
                     <div class="card-body">
                         <div class="row">
                             <div class="col-12 col-md-5">
-                                <img class="img-fluid rounded" data-src="$image" alt="">
+                                <img class="img-fluid rounded js-image" src="" 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>
+                                <h4 class="fs-6 mt-2 fw-bolder js-title"></h4>
+                                <p class="mt-2 text-muted small">
+                                    <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>
+                                    <span class="js-postal-code"></span>
+                                </p>
+                                <div class="js-tags"></div>
                             </div>
                         </div>
                     </div>