Location page
This commit is contained in:
86
src/routes/location/[country]/[location].svelte
Normal file
86
src/routes/location/[country]/[location].svelte
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<script context="module">
|
||||||
|
// Svelte
|
||||||
|
import { api, site, locations, currentLocation } from '../../../store'
|
||||||
|
|
||||||
|
// Preload
|
||||||
|
export async function preload (page, session) {
|
||||||
|
const photos = await this.fetch(`${api.rest}/items/photos?fields=id,name,date,slug,image.data,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&sort=-created_on,name`)
|
||||||
|
const photosData = await photos.json()
|
||||||
|
|
||||||
|
return {
|
||||||
|
photos: photosData.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Svelte
|
||||||
|
import { fade, slide } from 'svelte/transition'
|
||||||
|
import { stores } from '@sapper/app'
|
||||||
|
const { page } = stores()
|
||||||
|
export let photos
|
||||||
|
|
||||||
|
// Dependencies
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import advancedFormat from 'dayjs/plugin/advancedFormat'
|
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
|
dayjs.extend(advancedFormat)
|
||||||
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import Photo from '../../../components/Photo.svelte'
|
||||||
|
import SwitcherSide from '../../../components/SwitcherSide.svelte'
|
||||||
|
|
||||||
|
// Update current location
|
||||||
|
currentLocation.set({
|
||||||
|
location: $locations.find(location => location.slug === $page.params.location),
|
||||||
|
photos: photos
|
||||||
|
})
|
||||||
|
|
||||||
|
// Define things
|
||||||
|
const locationFull = `${$currentLocation.location.name}, ${$currentLocation.location.country.name}`
|
||||||
|
const dateUpdated = (photos.length) ? {
|
||||||
|
full: dayjs(photos[0].modified_on).format('MMM Do, YYYY'),
|
||||||
|
relative: dayjs().to(dayjs(photos[0].modified_on))
|
||||||
|
} : undefined
|
||||||
|
const lastUpdated = (photos.length) ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdated.full : dateUpdated.relative : undefined
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Houses Of - Beautiful houses of {locationFull}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="section container" in:fade out:slide>
|
||||||
|
<div class="nav content">
|
||||||
|
<SwitcherSide />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="title is-2">{locationFull}</h1>
|
||||||
|
{#if $currentLocation && $currentLocation.location.description}
|
||||||
|
<p>
|
||||||
|
{$site.description}<br>
|
||||||
|
Houses Of <a href="/choose">{$currentLocation.location.name}</a> {$currentLocation.location.description}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
{#if photos.length > 0}
|
||||||
|
<p><strong>Updated</strong> <time title="{dateUpdated && dateUpdated.full}">{lastUpdated}</time></p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if photos.length > 0}
|
||||||
|
<div class="columns is-multiline">
|
||||||
|
{#each photos as photo, index}
|
||||||
|
<div class="column is-one-third">
|
||||||
|
<Photo {photo} index={index + 1} />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="message is-danger">
|
||||||
|
<div class="message-body">
|
||||||
|
<p>No photos for {locationFull}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
<script context="module">
|
|
||||||
export async function preload (page, session) {
|
|
||||||
const location = await this.fetch('//api.housesof.localhost/how/gql?access_token=NJk0urljsdSvApUDzWxGgoO6', {
|
|
||||||
method: 'post',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ query: `{
|
|
||||||
locations (filter: { name_eq: "${page.params.location}" }) {
|
|
||||||
data {
|
|
||||||
name
|
|
||||||
region
|
|
||||||
country { name }
|
|
||||||
description
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}`})
|
|
||||||
})
|
|
||||||
const photos = await this.fetch(`http://api.housesof.localhost/how/items/photos?fields=id,name,image.data,created_on&filter[location.name][rlike]=%${page.params.location}%`)
|
|
||||||
const locationData = await location.json()
|
|
||||||
const photosData = await photos.json()
|
|
||||||
return {
|
|
||||||
location: locationData.data.locations.data[0],
|
|
||||||
photos: photosData.data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { slide } from 'svelte/transition'
|
|
||||||
import Photo from '../../components/Photo.svelte'
|
|
||||||
|
|
||||||
export let location
|
|
||||||
export let photos
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>Houses Of - Beautiful houses of {location.name}, {location.country.name}</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div class="section container" in:slide out:slide>
|
|
||||||
<div class="content">
|
|
||||||
<h1 class="title is-2">{location.name}, {location.country.name}</h1>
|
|
||||||
{#if location.description}
|
|
||||||
<p>Houses Of {location.name} {location.description}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns">
|
|
||||||
{#each photos as photo, index (photo.id)}
|
|
||||||
<div class="column">
|
|
||||||
<Photo {photo} {location} index={index + 1} />
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Reference in New Issue
Block a user