src/server/views/map.ts

   1 import { LocationType, Location, Path, City } from "../../shared/map";
   2
   3 export async function renderMap(data: { city: City, locations: Location[], paths: Path[]}, closestTown: number): Promise<string> {
   4
   5   if(!data) {
   6     console.error('oh no.. this got triggered without any city data');
   7   }
   8
   9   const servicesParsed: Record<LocationType, string[]> = {
  10     'SERVICES': [],
  11     'STORES': [],
  12     'EXPLORE': []
  13   };
  14
  15   data.locations.forEach(l => {
  16     servicesParsed[l.type].push(`<a href="#" hx-get="/city/${l.type.toLowerCase()}/${l.event_name}/${l.id}" hx-target="#explore">${l.name}</a>`);
  17   });
  18
  19   let html = `
  20 <section id="explore" class="tab active" style="background-image: url('/assets/img/map/${closestTown}.jpeg')" hx-swap-oob="true">
  21 <div class="city-title-wrapper"><div class="city-title">${data.city.name}</div></div>
  22   <div class="city-details flex">`;
  23
  24   if(servicesParsed.SERVICES.length) {
  25     html += `<div><h3>Services</h3>${servicesParsed.SERVICES.join("<br>")}</div>`
  26   }
  27   if(servicesParsed.STORES.length) {
  28     html += `<div><h3>Stores</h3>${servicesParsed.STORES.join("<br>")}</div>`
  29   }
  30   if(servicesParsed.EXPLORE.length) {
  31     html += `<div><h3>Explore</h3>${servicesParsed.EXPLORE.join("<br>")}</div>`
  32   }
  33   html += `
  34     <div>
  35       <h3>Travel</h3>
  36       ${data.paths.map(path => {
  37         return `<a href="#" hx-post="/travel/${path.ending_city}" hx-target="#explore">${path.ending_city_name}</a>`
  38       }).join("<br>")}
  39     </div>
  40   </div>
  41 </div>
  42 </section>
  43   `;
  44
  45   return html;
  46 };