Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Fix popup centering, styling, a bunch of other stuff

Browse source
This commit is contained in:
Ben Goldsworthy 2022-10-20 18:03:10 +00:00
parent 3e62eb8d37
commit 61d5f69699
2 changed files with 112 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

53
resources/views/tracker.blade.php
View file

@ -28,12 +28,12 @@
</nav>
<section class="trip-meta">
<p>
<span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
<span> Tracking started: {!! render_date_difference($trip->date_start) !!}</span> |
<span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> |
@if ($trip->is_active)
<span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span>
@endif
<span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span>
<span class="small">(Last update: {!! render_date_difference($trip->updated_at) !!})</span>
</p>
</section>
</header>
@ -43,6 +43,7 @@
<div id="map"></div>
</section>
<section id="checkinList">
<h2 class="section__title">@if ($showAllCheckins) Check-ins @else Recent Check-ins @endif</h2>
<ol start="{{ count($trip->checkins) }}" reversed>
@if($showAllCheckins)
@php $checkinsList = array_reverse($trip->checkins) @endphp
@ -55,7 +56,7 @@
<details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
<summary class="checkin__summary">
<h2 class="checkin__title">{{ $checkin->title ?? "[No title]" }}</h2>
<p class="checkin__meta">{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</p>
<p class="checkin__meta">{!! render_date_difference($trip->updated_at) !!}</p>
</summary>
{{ $checkin->note ?? "[No note]" }}
@if($checkin->image_url)
@ -153,6 +154,8 @@
checkins.forEach(checkin => {
if (checkin.id != checkinId && checkin.open) checkin.open = false;
});
console.log(checkinMarkers[checkinId].getLatLng());
map.setView(new L.LatLng(checkinMarkers[checkinId].getLatLng().lat + 0.03, checkinMarkers[checkinId].getLatLng().lng));
} else {
checkinMarkers[checkinId].closePopup();
}
@ -161,3 +164,47 @@
</footer>
</body>
</html>
@php
function render_date_difference ($start_time) {
$minute = 60;
$hour = 60 * 60;
$day = 3600 * 24;
$week = 86400 * 7;
$month = 604800 * 4;
$year = 2629800 * 12;
$start_time_dt = new DateTime($start_time);
$now = new DateTime();
$trip_start_difference = intval(($now->getTimestamp() - $start_time_dt->getTimestamp()));
$start_tag = '<span title="' . date('j M Y (G:H)', strtotime($start_time)) . '">';
$end_tag = "ago</span>";
$unit = null;
$div = 1;
if ($trip_start_difference < $minute) {
$unit = ' seconds ';
} else if ($trip_start_difference < $hour) {
$div = 60;
$unit = ' minutes ';
} else if ($trip_start_difference < $day) {
$div = 3600;
$unit = ' hours ';
} else if ($trip_start_difference < $week) {
$div = 86400;
$unit = ' days ';
} else if ($trip_start_difference < $month) {
$div = 604800;
$unit = ' weeks ';
} else if ($trip_start_difference < $year) {
$div = 2629800;
$unit = ' months ';
} else {
$div = 31557600;
$unit = ' years ';
}
return $start_tag . (floor( $trip_start_difference / $div )) . $unit . $end_tag;
}
@endphp