MARKTPLATZ/marktplatz/templates/marktplatz/product_detail.html

{% extends "base_generic.html" %}
{% load fullurl %}
{% load tags %}
{% load static %}
{% load compress %}
{% load email_obfuscator %}


{% block script %}

<link href="{% static 'featherlight.min.css' %}" type="text/css" rel="stylesheet" />
<script src="{% static 'featherlight.min.js' %}"></script>
<link href="{% static 'featherlight.gallery.min.css' %}" type="text/css" rel="stylesheet" />
<script src="{% static 'featherlight.gallery.min.js' %}"></script>

<script>
	$(document).ready(function() {

		$('.gallery').featherlightGallery({
			previousIcon: '«',
			nextIcon: '»',
			galleryFadeIn: 250,
			openSpeed: 250,
		});

	});
</script>

<style>
	.image-detail {

		margin: 40px 60px 40px 0px;

	}

	.object-text strong {

		font-weight: bolder;
		font: "NeuzeitGro-Bla", sans-serif;

	}

	.object-text {

		line-height: 1.2;
		color: #000;
	}

	.object-text h1,
	h2,
	h3,
	h4,
	h5 {

		color: #469CA8;
	}

	.object-color {

		color: #469CA8;

	}


	.titlepro {

		margin-top: 40px;
		font-family: NeuzeitGro-Bla;
	}

	@media (min-width: 500px) {}
</style>


{% endblock %}

{% block content %}


<!-- <hr style="color: black; background-color: black; margin-top: 0px; width: 130%; display: flex; margin-left: -20px; margin-right:20px "> -->

<div class="container " style="">
	<div class="row gemain-color object-text">
		<div class="col-sm-6">

			<h1 class="titlepro" style="">{{ object.name }}</h1>

			<p class="lead kur">{% if object.claim %}{{ object.claim }}{% endif %}</p>

			<div class="row object-color">
				<div class="col-sm-4">{% include "marktplatz/modal-share.html" %}</div>
				<div class="col-sm-4"> {% include "marktplatz/modal-sa.html" %}</div>
				<div class="col-sm-4">{% if object.email  %} {{ object.email | obfuscate_mailto:'<i class="fas fa-envelope"></i> Email'  }}{% endif %}</div>
			</div>

			<div class="">
				&nbsp;
			</div>
			<div class="">
				&nbsp;
			</div>
			<div class="">
				&nbsp;
			</div>
			<div class="">
				&nbsp;
			</div>

			<div class="">
				<p>
					<strong>Angebot</strong>:<br>
					{% if object.frei == 'JAJA' %}
					Platz frei.
					{% if object.kfrei %}
					{{ object.kfrei }}
					{% if object.email %}
					<br><br>
					{{ object.email | obfuscate_mailto:'<i class="fas fa-envelope"></i> Email'  }}
					{% endif %}
					{% endif %}
					{% endif %}

					{% if object.frei == 'WART' %}
					Wir haben derzeit keinen Platz frei, aber wir melden uns, wenn etwas frei wird. Aktiviere die Benachrichtigung!
					{% endif %}

					{% if object.frei == 'NEIN' %}
					Wir haben derzeit keinen Platz frei und führen auch keine Warteliste, auf die du dich setzen lassen kannst.
					{% endif %}
				</p>
			</div>


			<!-- <div class="">
						{{  object.mitmachen  }}
					</div> -->

			<p>{% if object.inseratstext  %}<strong>{% field_name object 'inseratstext' %}</strong>:<br>{{ object.inseratstext }} {% if object.email  %}<br><br>{{ object.email | obfuscate_mailto:'<i class="fas fa-envelope"></i> Email'  }}
				{% endif %}{% endif %}</p>

			<div class="">
				&nbsp;
			</div>


			<div class="">{% if object.beschreibung %}<strong>{% field_name object 'beschreibung' %}</strong>:<br>{{ object.beschreibung | safe | linebreaks }}{% endif %}</div>
			<div class="">{% if object.learning %}<strong>{% field_name object 'learning' %}</strong>:<br>{{ object.learning | safe | linebreaks }}{% endif %}</div>


			<div class="">
				&nbsp;
			</div>
			<div class="">
				&nbsp;
			</div>




			{% for video in object.video_set.all %}

			<video autoplay style="width: 100%;height: auto;vertical-align: middle; padding-bottom: 10px" controls>
				<source src="{{video.image.url}}" type="video/mp4">
			</video>

			{% endfor %}

			{% if object.media_set %}
			{% for media in object.media_set.all %}
			{% if not forloop.first %}
			{% if forloop.counter < 6  %}
			<div class="image-detail" style="flex: {% get_ratio media %}; ">
				<img href="{{media.image_big.url}}" src="{{ media.image_norm.url }}?v={{ media.pk }}" class="gallery img-fluid img-responsive" alt="" style="width: 100%;height: auto;vertical-align: middle;">
			</div>
			{% endif %}
			{% endif %}
			{% endfor %}
			{% endif %}


		</div>



		<!-- *************************************************************** -->


		<div class="col-sm-6">


			<div class="image-detail" style="">
				<img href="{{object.media_set.first.image_big.url}}" src="{{ object.media_set.first.image_norm.url }}?v={{ object.media_set.first.pk }}" class="gallery img-fluid img-responsive" alt="" style="width: 100%;height: auto;vertical-align: middle;">
			</div>

			<br />
			<h5 class=" mediumkur">Kontakt</h5>
			<br />

			<p>{{ object.adresse }}{% if object.adresse_zusatz  %}, {{ object.adresse_zusatz }}{% endif %}{% if object.plz  %}, {{ object.plz }}{% endif %}{% if object.ort %}, {{ object.get_ort_display }}{% endif %}</p>

			<div class="row">
				<div class="col-sm-4">
					{% if object.email  %}<p>{{ object.email | obfuscate_mailto:'<i class="fas fa-envelope"></i> Email'  }}</p>{% endif %}

				</div>
				<div class="col-sm-8">
					{% if object.email  %}<p><a href="mailto:{{ object.email | obfuscate }}">{{ object.email | obfuscate }}</a></p>{% endif %}

				</div>
			</div>

			<div class="row">
				<div class="col-sm-4">
					{% if object.website  %}<p><a href="{{  object.website }}" target="_blank" rel="noopener">Webseite</a></p>{% endif %}

				</div>
				<div class="col-sm-8">
					{% if object.website  %}<p><a href="{{  object.website }}" target="_blank" rel="noopener">{{ object.website }}</a></p>{% endif %}

				</div>
			</div>


			<br />
			<h5 class=" mediumkur">Steckbrief</h5>
			<br />

			{% block detail %}

			<p>{{ object.kind_of_product }}, gegründet {{ object.gruendungsjahr }}{% if object.betriebgenommen  %}, in Betrieb genommen: {{ object.betriebgenommen }}{% endif %}.</p>
			<p><strong>Rechtsform</strong>: {{ object.rechtsform }}</p>
			<!-- XXX -->
			<p>{{ object.artmodell }}</p>
			<p>{% if object.orga  %}<strong>{% field_name object 'orga' %}</strong>: {{ object.orga }}{% endif %}</p>
			<!-- XXX -->
			<p>{% if object.eigentum  %}<strong>{% field_name object 'eigentum' %}</strong>: {{ object.get_eigentum_display }}{% endif %}</p>
			<!-- XXX -->
			<p>{% if object.gprojekte  %}<strong>Gemeinschaftliche Projekte</strong>: {{ object.gprojekte }}{% endif %}</p>

			<p>{% if object.zielgruppen  %}<strong>Besondere Zielgruppen</strong>: {{ object.zielgruppen }}{% endif %}</p>
			<p>{% if object.freiraumangebote  %}<strong>Freiraumangebote</strong>: {{ object.freiraumangebote }}{% endif %}</p>
			<p>{% if object.oekologie  %}<strong>{% field_name object 'oekologie' %}</strong>: {{ object.oekologie }}{% endif %}</p>
			<p>{% if object.schwerpunkt  %}<strong>{% field_name object 'schwerpunkt' %}</strong>: {{ object.schwerpunkt }}{% endif %}</p>

			<br />
			<h5 class=" mediumkur">Kenndaten</h5>
			<br />

			<p>{% if object.altneu       %}{{ object.get_altneu_display }}{% endif %}{% if object.bauweise %}, {{ object.bauweise }}{% endif %}</p>
			<p>{% if object.bautraeger   %}<strong>{% field_name object 'bautraeger' %}:</strong>: {{ object.bautraeger }}{% endif %}</p>
			<p>{% if object.architektur  %}<strong>{% field_name object 'architektur' %}:</strong> {{ object.architektur  }}{% endif %}</p>
			<p>{% if object.wohnbaufoerderung  %}<strong>{% field_name object 'wohnbaufoerderung' %}:</strong> {{ object.wohnbaufoerderung }}{% endif %}</p>

			<p>
				{% if object.type == 'WOHN' %}
				im Haus Wohnen {% if object.aerwachsene %}ca {{ object.aerwachsene }} Erwachsene{% endif %}{% if object.aerwachsene %} und {{ object.akinder }} Kinder{% endif %}.
				{% endif %}
				Anzahl der Mitglieder: {{ object.amitglieder }}
			</p>
			<p>{% if object.awohnungen  %}<strong>{% field_name object 'awohnungen' %}:</strong> {{ object.awohnungen  }} Wohnungen{% endif %}</p>
			<p>{% if object.gaestwohnungen  %}<strong>{% field_name object 'gaestwohnungen' %}:</strong> {{ object.gaestwohnungen }}{% endif %}</p>
			<p>{% if object.wohnflaeche  %}<strong>{% field_name object 'wohnflaeche' %}:</strong> {{ object.wohnflaeche }} m<sup>2</sup>{% endif %}</p>
			<p>{% if object.sonderwohnformen  %}<strong>{% field_name object 'sonderwohnformen' %}</strong>: {{ object.sonderwohnformen }}{% endif %}</p>
			<p>{% if object.gewerbeflaechen  %}<strong>{% field_name object 'gewerbeflaechen' %}:</strong> {{ object.gewerbeflaechen }} m<sup>2</sup>{% endif %}</p>
			<p>{% if object.gewerbe %}<strong>{% field_name object 'gewerbe' %}:</strong> {{ object.gewerbe }}{% endif %}</p>
			<p>{% if object.gemeinschaftsflaeche  %}<strong>{% field_name object 'gemeinschaftsflaeche' %}:</strong> {{ object.gemeinschaftsflaeche }} m<sup>2</sup>{% endif %}</p>
			<p><strong>Gemeinschaftsräume</strong>:
				{{ object.gemeinschaftr }}{% if object.kgemeinschaftr  %}, {{ object.kgemeinschaftr }}{% endif %}
			</p>
			<p>{% if object.sonstige_flaechen  %}<strong>{% field_name object 'sonstige_flaechen' %}:</strong> {{ object.sonstige_flaechen }} m<sup>2</sup>{% endif %}</p>
			<p>{% if object.flaeche  %}<strong>{% field_name object 'flaeche' %}:</strong> {{ object.flaeche }} m<sup>2</sup>{% endif %}</p>
			<p>{% if object.kflaechen  %}<strong>{% field_name object 'kflaechen' %}:</strong> {{ object.kflaechen }} m<sup>2</sup>{% endif %}</p>
			<p>{% if object.parbeiten  %}Im Haus arbeiten ca {{ object.parbeiten }} Personen.{% endif %}
				{% if object.karbeiten  %}{{ object.karbeiten }}{% endif %}</p>
			<p>{% if object.raumangebot  %}<strong>{% field_name object 'raumangebot' %}:</strong> {{ object.raumangebot }}{% if object.kraumangebot  %},
				{{ object.kraumangebot }}
				{% endif %}

				{% endif %}</p>


			<!-- <p>{% if object.kraumangebot  %}<strong>{% field_name object 'kraumangebot' %}:</strong>  {{ object.kraumangebot }}{% endif %}</p> -->


			{% endblock %}

			<br />
			<h5 class="mediumkur">Siehe auch</h5>
			<p>Posts tagged {{ object.name|slugify }}</p>
			<br />
			<ul class="" id="blog-posts-container">
				<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" v-bind:link="post.link" v-bind:excerpt="post.excerpt"></blog-post>
			</ul>



			<br />
			<h5 class="mediumkur">Mediacredits</h5>
			<br />
			{% for media in object.media_set.all %}
			{% if media.copyright %}
			<p class="fieldname"> {{ media.copyright }}</p>
			{% endif %}
			{% endfor %}
			{% for media in object.video_set.all %}
			{% if media.copyright %}
			<p class="fieldname"> {{ media.copyright }}</p>
			{% endif %}
			{% endfor %}

			{% if object.media_set  %}
			{% for media in object.media_set.all %}
			{% if forloop.counter > 5  %}
			<div style="flex: {% get_ratio media %}; margin:40px 60px 40px 0px;">
				<img href="{{media.image_big.url}}" src="{{  media.image_norm.url  }}?v={{  media.pk  }}" class="gallery img-fluid img-responsive" alt="" style="width: 100%;height: auto;vertical-align: middle;">
			</div>
			{% endif %}
			{% endfor %}
			{% endif %}

		</div>
	</div>

</div>


<div class="container">

	<div class="row" style="margin-top: 10px">

		<div class="col-sm-6">


		</div>
		<div class="col-sm-4">

			 				 {% for field, value in object %}
			          {% if value and not field == "ID" %}
			           <!-- <p class="fieldname"><strong class="mediumkur"> {{ field }} :</strong> {{ value }}</p> -->
			          {% endif %}
			          {% endfor %}

		</div>

	</div>

</div>

{% compress js  %}

<script>
	$(document).ready(function($) {

		axios.get('https://blog.gemeinschaffen.com/wp-json/wp/v2/tags?per_page=100').then(resp => {

			queryData(resp);

		});

		function queryData(resp) {

			var requests = []

			var projTag = jsonQuery('[*slug={{ object.name|slugify }}]', {
				data: resp.data
			});

			var postsTag = jsonQuery('[*slug=gemeinschaffen]', {
				data: resp.data
			});

			if (!projTag.value.length && !postsTag.value.length) {
				return;
			}

			if (projTag.value.length) {
				url = "https://blog.gemeinschaffen.com/wp-json/wp/v2/posts?tags=" + projTag.value[0].id ;
				requests.push(axios.get(url));
			}

			// general tag as gemeinschaffen deactivated.
			// if (postsTag.value.length) {
			// 	url = "https://blog.gemeinschaffen.com/wp-json/wp/v2/posts?tags=" + postsTag.value[0].id
			// 	requests.push(axios.get(url));
			// }

			axios.all(requests).then(axios.spread(function(...responses) {
				rpost = []
				for (index = 0; index < responses.length; index++) {
					rpost = rpost.concat(responses[index].data);
				}

				if (rpost.length) {
					generateLinks(rpost);
				}


			}));


		}

		function generateLinks(data) {

			Vue.component('blog-post', {
				props: ['title', 'link', 'excerpt'],
				delimiters: ['<%', '%>'],
				template: `
		 <li>
			 <a title="link-title" :href="link" target="_blank" v-html="title.rendered"></a>
			 <p v-html="excerpt.rendered"></p>
		 </li>`
			})

			new Vue({

				el: '#blog-posts-container',
				delimiters: ['<%', '%>'],
				data: {
					posts: data
				}
			})

		}

	}); // document ready
</script>
{% endcompress %}




{% endblock %}