<commit_before><!--
Page ...
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../lib/marked-import.html">

<dom-module id="tpc-page-event">

	<template>
		<style>
			app-toolbar {
				background-color: #f7f7f7;
			}

			paper-progress {
				width: 100%;
			}

			.event {
				margin: 0 10px;
			}
		</style>

		<app-header-layout>
			<app-header reveals condenses effects="waterfall">
				<app-toolbar>
					<a href="/home">
						<paper-icon-button icon="icons:arrow-back"></paper-icon-button>
					</a>
					<div main-title>Retour accueil</div>
					<!--<paper-progress indeterminate bottom-item></paper-progress>-->
				</app-toolbar>

			</app-header>
			<div class="event">
				<h1>{{event.title}}</h1>
				<p>{{event.organizerName}}</p>
				<p>{{event.startTime}}</p>
				<p>{{event.location.name}}, {{event.location.street}} {{event.location.zip}} {{event.location.city}}</p>

				<div id="markdown-content"></div>
			</div>
		</app-header-layout>

	</template>

	<script>
		Polymer({
			is: 'tpc-page-event',

			properties: {
				firebaseApp: {
					type: Object,
					notify: false
				},
				eventId: {
					type: Object,
					notify: true,
					observer: '_eventIdChanged'
				},
				event: {
					type: Object,
					notify: true
				}
			},

			queryDatabase: function () {
				var xhr = new XMLHttpRequest(),
					url = app.databaseURL +
						'/events/' +
						this.eventId +
						'.json';

				xhr.onreadystatechange = this.onProcessRequest.bind(this, xhr);
				xhr.open("GET", url, true);
				xhr.send();
			},

			onProcessRequest: function (xhr, event) {
				var response;

				if (xhr.readyState === 4 && xhr.status === 200) {
					response = JSON.parse(xhr.responseText);

					if (response) {
						this.event = response;

						document.getElementById('markdown-content').innerHTML =
							marked(response.description);

						//this.removeProgressBar();
					}
				}
			},

			removeProgressBar: function () {
				var elem = document.getElementsByTagName('paper-progress');

				if (elem.length) {
					elem[0].parentNode.removeChild(elem[0]);
				}
			},

			_eventIdChanged: function () {
				this.event = null;
				this.queryDatabase();
			}
		});
	</script>
</dom-module><commit_msg>Styling of the event's details page.<commit_after><!--
Page ...
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
<link rel="import" href="../../bower_components/iron-icons/social-icons.html">
<link rel="import" href="../../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../lib/marked-import.html">
<link rel="import" href="../lib/moment-import.html">

<dom-module id="tpc-page-event">

	<template>
		<style>
			app-toolbar {
				background-color: #f7f7f7;
			}

			paper-progress {
				width: 100%;
			}

			header {
				padding: 10px;
				background-color: #d2d2d2;
			}

			article {
				margin: 0 10px;
			}

			header h1 {
				margin: 0;
				text-align: center;
			}

			.location-link {
				color: black;
				text-decoration: none;
			}
		</style>

		<app-header-layout>
			<app-header reveals condenses effects="waterfall">
				<app-toolbar>
					<a href="/home">
						<paper-icon-button icon="icons:arrow-back"></paper-icon-button>
					</a>
					<div main-title>Retour accueil</div>
					<!--<paper-progress indeterminate bottom-item></paper-progress>-->
				</app-toolbar>

			</app-header>
			<header>
				<h1>{{event.title}}</h1>
				<paper-icon-item>
					<iron-icon icon="social:people" item-icon></iron-icon>
					{{event.organizerName}}
				</paper-icon-item>
				<paper-icon-item>
					<iron-icon icon="editor:insert-invitation" item-icon></iron-icon>
					{{prettifyDate(event.startTime)}}
				</paper-icon-item>
				<a href$="https://www.google.fr/maps?q={{getLocationQuery(event.location)}}"
					target="_blank"
					class="location-link">
					<paper-icon-item>
						<iron-icon icon="icons:room" item-icon></iron-icon>
						{{event.location.name}}
					</paper-icon-item>
				</a>
			</header>

			<article>
				<h3>Description</h3>
				<div id="markdown-content"></div>
			</article>
		</app-header-layout>

	</template>

	<script>
		Polymer({
			is: 'tpc-page-event',

			properties: {
				firebaseApp: {
					type: Object,
					notify: false
				},
				eventId: {
					type: Object,
					notify: true,
					observer: '_eventIdChanged'
				},
				event: {
					type: Object,
					notify: true
				}
			},

			queryDatabase: function () {
				var xhr = new XMLHttpRequest(),
					url = app.databaseURL +
						'/events/' +
						this.eventId +
						'.json';

				xhr.onreadystatechange = this.onProcessRequest.bind(this, xhr);
				xhr.open("GET", url, true);
				xhr.send();
			},

			onProcessRequest: function (xhr, event) {
				var response;

				if (xhr.readyState === 4 && xhr.status === 200) {
					response = JSON.parse(xhr.responseText);

					if (response) {
						this.event = response;

						document.getElementById('markdown-content').innerHTML =
							marked(response.description);

						//this.removeProgressBar();
					}
				}
			},

			removeProgressBar: function () {
				var elem = document.getElementsByTagName('paper-progress');

				if (elem.length) {
					elem[0].parentNode.removeChild(elem[0]);
				}
			},

			prettifyDate: function (date) {
				return moment(date).format('dddd DD MMMM - HH:mm');
			},

			getLocationQuery: function (location) {
				return location ? [
					location.name,
					', ',
					location.street,
					', ',
					location.zip,
					' ',
					location.city,
					', ',
					location.country
				].join('') : null;
			},

			_eventIdChanged: function () {
				this.event = null;
				this.queryDatabase();
			}
		});
	</script>
</dom-module>
{'fraction_non_alphanumeric': 0.1881950384944397, 'fraction_numerical': 0.006130595950955232, 'mean_word_length': 2.8228882833787465, 'pattern_counts': {'":': 0, '<': 108, '<?xml version=': 0, '>': 108, 'https://': 1, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '349441', 'n_tokens_mistral': 3035, 'n_tokens_neox': 2317, 'n_words': 372}