@extends('default') @section('title') Details & Logs @endsection @section('head') <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> @endsection @section('content') <div id="banner-container" class="container"> <h1>Details & Stats</h1> <p>View and edit information about your link</p> </div> <div id="details" class="container"> <h2>Details</h2> <form id="update-form" method="post" action="{{ url()->current() }}/update"> @csrf <div id="info-container"> <label id="destination-label" for="destination">Destination</label> <a href="{{ $shortlink->destination }}" target="_blank" id="destination"><button title="Copy Link" id="destination_clipboard">🔗</button>{{ $shortlink->destination }}</a> <label id="URL-label" for="url">URL</label> <a href="{{ url()->to($shortlink->shortid) }}" target="_blank" id="url"><button title="Copy Link" id="url_clipboard">🔗</button>{{ url()->to($shortlink->shortid) }}</a> <label id="maxclicks-label" for="maxclicks">Max Clicks</label> <img id="maxclicks-info" class="info" src="{{ asset("img/icons/info.svg") }}" title="This link will stop working after the maximum number of clicks has been reached. Set this to 0 to allow an infinite number of uses."> <input id="maxclicks" name="maxclicks" type="number" value="{{ $shortlink->max_clicks }}" required> <label id="expiry-label" for="expiry-toggle">Expiry</label> <img id="expiry-info" class="info" src="{{ asset("img/icons/info.svg") }}" title="This link will stop working after the specified time. This uses UTC time."> <input id="expiry-toggle" name="expiry-toggle" type="checkbox" @if ($shortlink->expires_at != null) checked @endif > <label id="date-label" for="expiry-date">Date</label> <input id="expiry-date" name="expiry-date" type="date" @if ($shortlink->expires_at != null) value="{{ Carbon\Carbon::parse($shortlink->expires_at)->format('Y-m-d') }}" @else value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" @endif > <label id="time-label" for="expiry-hour">Time</label> <select id="expiry-hour" name="expiry-hour"> @for ($i = 0; $i < 24; $i++) {{$j = str_pad($i, 2, '0', STR_PAD_LEFT)}} <option value="{{ $j }}" @if ($shortlink->expires_at != null && Carbon\Carbon::parse($shortlink->expires_at)->hour == $j) selected @endif >{{ $j }}</option> @endfor </select> <label id="time-separator" for="expiry-minute">:</label> <select id="expiry-minute" name=expiry-minute> @for ($i = 0; $i < 60; $i+=5) {{$j = str_pad($i, 2, '0', STR_PAD_LEFT)}} <option value="{{ $j }}" @if ($shortlink->expires_at != null && Carbon\Carbon::parse($shortlink->expires_at)->minute == $j) selected @endif >{{ $j }}</option> @endfor </select> <label id="timestamp-label" for="created">Timestamps</label> <p id="created">{{ Carbon\Carbon::parse($shortlink->created_at)->format('H:i l jS F Y') }}</p> <p id="updated">{{ Carbon\Carbon::parse($shortlink->updated_at)->format('H:i l jS F Y') }}</p> <button type="submit" form="update-form">Save</button> </div> </form> </div> <div id="graphs" class="container"> <div id="map-wrapper"> <h2>Heatmap</h2> <div id="map"></div> </div> <div id="timeline-wrapper"> <h2>Timeline</h2> <canvas id="cumulativeGraph" width="540" height="400"></canvas> </div> </div> <div id="stats" class="container"> <h2>Clicks by Country</h2> <table> <thead> <th>📍</th> <th>Country</th> <th>Clicks</th> </thead> @php $total = 0; $rows = []; @endphp @foreach ($countrylist as $country) @php $total += $country['total']; $row = "<tr> <td>" . $country['emoji'] . "</td> <td>" . ($country['country'] ?? 'Unknown') . "</td> <td>" . $country['total'] . "</td> </tr>"; array_push($rows, $row); @endphp @endforeach <tr> <td>🌎</td> <td>Total</td> <td>{{ $total }}</td> </tr> @foreach ($rows as $row) {!! $row !!} @endforeach </table> </div> @endsection @section('scripts') <script src="{{ asset('js/details.js') }}"></script> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script> <script> var map = L.map('map').setView([50, 0], 3); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, }).addTo(map); var heat = L.heatLayer([], { radius: 50, blur: 20, maxZoom: 3, max: 5, }).addTo(map); async function loadHeatmapData() { var data = [ @foreach ($coordinates as $coordinate) {lat:{{ $coordinate['latitude'] }}, lng:{{ $coordinate['longitude'] }}}, @endforeach ]; heat.setLatLngs(data); } loadHeatmapData(); </script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script> <script> const timestamps = [ @foreach ($timestamps as $timestamp) '{{ $timestamp['created_at'] }}', @endforeach ]; // Function to count occurrences cumulatively function getCumulativeCounts(timestamps) { const counts = []; const dateCounts = {}; timestamps.forEach((timestamp) => { const date = new Date(timestamp).toISOString(); // Get date part only if (dateCounts[date]) { dateCounts[date]++; } else { dateCounts[date] = 1; } counts.push({ date: date, count: Object.values(dateCounts).reduce((a, b) => a + b, 0) }); }); return counts; } // Get the cumulative data const cumulativeData = getCumulativeCounts(timestamps); // Extract dates and counts for the chart const labels = cumulativeData.map(data => data.date); const data = cumulativeData.map(data => data.count); // Create the chart const ctx = document.getElementById('cumulativeGraph').getContext('2d'); const cumulativeGraph = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Total Clicks', data: data, borderColor: 'rgba(255, 0, 80, 1)', backgroundColor: 'rgba(255, 0, 80, 0.2)', borderWidth: 1, fill: true }] }, options: { scales: { x: { type: 'time', time: { unit: 'day' } }, y: { beginAtZero: true } } } }); </script> @endsection