199 lines
4.3 KiB
PHP
199 lines
4.3 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" style="grid-row-start: 1; grid-row-end: 3;">
|
|
<header>
|
|
<h2 id="belegung-title">
|
|
Belegung am {{ json_decode($extractiondates)[0] }}
|
|
</h2>
|
|
</header>
|
|
<div id="chart-calendar"></div>
|
|
</article>
|
|
<article class="header">
|
|
<header>
|
|
<h2>
|
|
Entwicklung der Verfügbarkeit
|
|
</h2>
|
|
</header>
|
|
<div id="chart-capacity"></div>
|
|
</article>
|
|
<script type="module">
|
|
const chartCapacity = document.getElementById('chart-capacity');
|
|
const cCapacity = echarts.init(chartCapacity);
|
|
|
|
const cCapacityOptions = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
left: '0',
|
|
right: 10,
|
|
bottom: '0',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: {!! json_encode($capacities['dates']) !!}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Alle',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
symbolSize: 7,
|
|
data: {!! json_encode($capacities['capacities']) !!}
|
|
}
|
|
]
|
|
};
|
|
|
|
cCapacity.setOption(cCapacityOptions);
|
|
|
|
|
|
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: 10,
|
|
left: 50,
|
|
bottom: "66%"
|
|
},
|
|
{
|
|
orient: 'horizontal',
|
|
range: '2025',
|
|
right: 10,
|
|
left: 50,
|
|
top: '43%',
|
|
bottom: '43%'
|
|
},
|
|
{
|
|
orient: 'horizontal',
|
|
range: '2026',
|
|
right: 10,
|
|
left: 50,
|
|
top: '66%',
|
|
bottom: '10%'
|
|
}
|
|
],
|
|
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) !!}
|
|
},
|
|
{
|
|
type: 'heatmap',
|
|
coordinateSystem: 'calendar',
|
|
calendarIndex: 2,
|
|
data: {!! json_encode($c) !!}
|
|
}]
|
|
},
|
|
@endforeach
|
|
]
|
|
};
|
|
|
|
cCalendar.setOption(cCalendarOptions);
|
|
cCalendar.on('timelinechanged', (e) => {
|
|
h2Belegung.innerText = "Belegung am "+cCalendarOptions.timeline.data[e.currentIndex];
|
|
/*
|
|
series = cCalendarOptions.series[0].data
|
|
series[e.currentIndex]
|
|
series: [
|
|
{
|
|
name: 'Alle',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
symbolSize: 7,
|
|
data: {!! json_encode($capacities['capacities']) !!}
|
|
}
|
|
]
|
|
cCapacity.setOption({
|
|
|
|
|
|
})
|
|
*/
|
|
})
|
|
|
|
cCapacity.on('click', 'series', (e) => {
|
|
|
|
cCalendar.dispatchAction({
|
|
type: 'timelineChange',
|
|
currentIndex: e.dataIndex
|
|
});
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
@endsection
|