ConsultancyProject_2_ETL/dashboard/resources/views/property.blade.php

114 lines
2.7 KiB
PHP

@extends('base')
@section('main')
<article class="header">
<header>
<h2>
Angaben zur Property
</h2>
</header>
<dl>
@foreach ($base as $dt => $dd)
<dt>{{ $dt }}</dt>
<dd>
@if ($dt === 'property_platform_id')
<a href="https://www.e-domizil.ch/rental/{{ $dd }}" rel="noopener noreferrer" target="_blank">
{{ $dd }}
</a>
@else
{{ $dd }}
@endif
</dd>
@endforeach
</dl>
</article>
<article class="header">
<header>
<h2 id="belegung-title">
Belegung am {{ json_decode($extractiondates)[0] }}
</h2>
</header>
<div id="chart-calendar"></div>
</article>
<script type="module">
const chartCalendar = document.getElementById('chart-calendar');
const cCalendar = echarts.init(chartCalendar);
const h2Belegung = document.getElementById('belegung-title');
const cCalendarOptions = {
timeline: {
data: {!! $extractiondates !!},
playInterval: 1000,
axisType: 'time',
left: 0,
right: 0,
label: {
show: false
}
},
visualMap: {
categories: [0,1,2],
inRange: {
color: ['red', 'purple', 'green']
},
formatter: (cat) => {
switch (cat) {
case 0:
return 'Ausgebucht';
case 1:
return 'Verfügbar (kein Anreisetag)';
case 2:
return 'Verfügbar';
}
},
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 0
},
calendar:[
{
orient: 'horizontal',
range: '2024',
top: 50,
right: 0,
left: 50,
bottom: "55%"
},
{
orient: 'horizontal',
range: '2025',
right: 100,
left: 50,
bottom: 60,
top: '55%'
},
],
options: [
@foreach ($calendar as $c)
{
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0,
data: {!! json_encode($c) !!}
},
{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 1,
data: {!! json_encode($c) !!}
}]
},
@endforeach
]
};
cCalendar.setOption(cCalendarOptions);
cCalendar.on('timelinechanged', (e) => {
h2Belegung.innerText = "Belegung am "+cCalendarOptions.timeline.data[e.currentIndex];
})
</script>
@endsection