ConsultancyProject_2_ETL/dashboard/resources/views/property.blade.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