user_home.templ
1package pages
2
3import (
4 "git.kilimanjaro.io/rtw/document"
5 "git.kilimanjaro.io/rtw/pages/components"
6 "git.kilimanjaro.io/rtw/pages/utils"
7)
8
9// blue, red, orange, yellow, green, cyan, purple, magenta
10var colors = []string{"#205ea6", "#af3029", "#bc5215", "#ad8301", "#66800b", "#24837b", "#5e409d", "#a02f6f"}
11
12templ UserHome(data UserHomeData) {
13 @Layout() {
14 <div class="px-2 md:px-0 py-18">
15 <div class="w-full h-[50dvh] mx-auto flex flex-col rounded-xl shadow-md">
16 @components.Map(data.StyleURL, data.Bbox, "rounded-xl w-full h-full") {
17 for i, tripWaypoints := range data.Waypoints {
18 for _, tp := range tripWaypoints {
19 for _, route := range tp.From {
20 @components.Route(route.ID, colors[i%len(colors)])
21 }
22 }
23 }
24 }
25 </div>
26 <div class="py-2 mt-4">
27 <span class="font-extrabold text-xl md:text-2xl">Trips</span>
28 <span class="font-gray-600 pl-2">({ len(data.Waypoints) })</span>
29 </div>
30 <div class="w-10 h-1 bg-(--color-orange) mb-4"></div>
31 <div class="flex flex-col gap-10">
32 for i, wp := range data.Waypoints {
33 <div class="flex flex-row gap-4">
34 <div class="h-[200px] md:w-[200px] w-full rounded-xl shadow-md">
35 @components.TripMap(data.StyleURL, wp, colors[i%len(colors)])
36 </div>
37 <div class="w-full h-full flex flex-col grow max-h-[300px] md:max-h-[200px]">
38 <div class="grow truncate mb-2 border-1 border-gray-300 rounded-xl px-2 py-1 shadow-md flex flex-col md:flex-row gap-4">
39 <div class="border-b-2 md:border-r-2 md:border-b-0 border-(--color-orange) pb-2 md:pr-2 md:pb-0 flex flex-row md:flex-col justify-between">
40 <div class="flex flex-row md:flex-col gap-2 md:gap-0">
41 <div class="uppercase text-gray-600 text-sm">Waypoints</div>
42 <div class="font-bold text-(--color-black) mb-1 text-sm md:text-md">{ len(wp) }</div>
43 </div>
44 <div class="flex flex-row md:flex-col gap-2 md:gap-0">
45 <div class="uppercase text-gray-600 text-sm">Distance</div>
46 <div class="font-bold text-(--color-black) mb-1 text-sm md:text-md">{ utils.FormatDistance(utils.Distance(wp)) }</div>
47 </div>
48 <div class="flex flex-row md:flex-col gap-2 md:gap-0">
49 <div class="uppercase text-gray-600 text-sm">Countries</div>
50 <div class="font-bold text-(--color-black) mb-1 text-sm md:text-md">{ len(utils.Countries(wp)) }</div>
51 </div>
52 </div>
53 @document.DocumentComponent(data.Documents[i])
54 </div>
55 <div class="justify-start mt-1 flex flex-row">
56 if data.IsLoggedInUser {
57 <a
58 href={ templ.URL("/edit/" + data.DocumentIDs[i].Compact()) }
59 class="bg-(--color-blue) rounded-full text-white px-5 py-1 w-content flex flex-row cursor-pointer hover:ring-2 hover:ring-white"
60 >
61 Edit this trip
62 <svg class="ml-2 items-center m-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-pen-line-icon lucide-file-pen-line"><path d="M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z"></path><path d="M14.487 7.858A1 1 0 0 1 14 7V2"></path><path d="M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516"></path><path d="M8 18h1"></path></svg>
63 </a>
64 } else {
65 <a
66 href={ templ.URL("/trip/" + data.DocumentIDs[i].Compact()) }
67 class="border-2 border-gray-300 rounded-md text-(--color-black) px-5 py-1 w-content flex flex-row cursor-pointer hover:ring-4 hover:ring-(--color-orange)"
68 >
69 View this trip
70 <svg class="ml-2 items-center m-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-icon lucide-map"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"></path><path d="M15 5.764v15"></path><path d="M9 3.236v15"></path></svg>
71 </a>
72 }
73 </div>
74 </div>
75 </div>
76 }
77 </div>
78 </div>
79 }
80}
