114 lines
2.7 KiB
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
|