style: apply prettier lint
Raymond Huang
parent
ea8d08eba7
commit
2097f26d17
|
|
@ -1,11 +1,18 @@
|
|||
<template>
|
||||
<div class="container" ref="container" :class="{ 'icon-loading': loading > 0 }">
|
||||
<div
|
||||
class="container"
|
||||
ref="container"
|
||||
:class="{ 'icon-loading': loading > 0 }"
|
||||
>
|
||||
<!-- Static top matter -->
|
||||
<TopMatter ref="topmatter" @updateBoundary="updateBoundary" />
|
||||
|
||||
<!-- No content found and nothing is loading -->
|
||||
<NcEmptyContent title="Nothing to show here" :description="emptyViewDescription"
|
||||
v-if="loading === 0 && list.length === 0">
|
||||
<NcEmptyContent
|
||||
title="Nothing to show here"
|
||||
:description="emptyViewDescription"
|
||||
v-if="loading === 0 && list.length === 0"
|
||||
>
|
||||
<template #icon>
|
||||
<PeopleIcon v-if="routeIsPeople" />
|
||||
<ArchiveIcon v-else-if="routeIsArchive" />
|
||||
|
|
@ -14,9 +21,21 @@
|
|||
</NcEmptyContent>
|
||||
|
||||
<!-- Main recycler view for rows -->
|
||||
<RecycleScroller ref="recycler" class="recycler" :class="{ empty: list.length === 0 }" :items="list"
|
||||
:emit-update="true" :buffer="800" :skipHover="true" key-field="id" size-field="size" type-field="type"
|
||||
:updateInterval="100" @update="scrollChange" @resize="handleResizeWithDelay">
|
||||
<RecycleScroller
|
||||
ref="recycler"
|
||||
class="recycler"
|
||||
:class="{ empty: list.length === 0 }"
|
||||
:items="list"
|
||||
:emit-update="true"
|
||||
:buffer="800"
|
||||
:skipHover="true"
|
||||
key-field="id"
|
||||
size-field="size"
|
||||
type-field="type"
|
||||
:updateInterval="100"
|
||||
@update="scrollChange"
|
||||
@resize="handleResizeWithDelay"
|
||||
>
|
||||
<template #before>
|
||||
<!-- Show dynamic top matter, name of the view -->
|
||||
<div class="recycler-before" ref="recyclerBefore">
|
||||
|
|
@ -24,15 +43,24 @@
|
|||
{{ viewName }}
|
||||
</div>
|
||||
|
||||
<OnThisDay v-if="routeIsBase" :key="config_timelinePath" :viewer="$refs.viewer"
|
||||
@load="scrollerManager.adjust()">
|
||||
<OnThisDay
|
||||
v-if="routeIsBase"
|
||||
:key="config_timelinePath"
|
||||
:viewer="$refs.viewer"
|
||||
@load="scrollerManager.adjust()"
|
||||
>
|
||||
</OnThisDay>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot="{ item, index }">
|
||||
<div v-if="item.type === 0" class="head-row" :class="{ selected: item.selected }"
|
||||
:style="{ height: item.size + 'px' }" :key="item.id">
|
||||
<div
|
||||
v-if="item.type === 0"
|
||||
class="head-row"
|
||||
:class="{ selected: item.selected }"
|
||||
:style="{ height: item.size + 'px' }"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="super" v-if="item.super !== undefined">
|
||||
{{ item.super }}
|
||||
</div>
|
||||
|
|
@ -43,34 +71,63 @@
|
|||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="photo" v-for="photo of item.photos" :key="photo.key" :style="{
|
||||
<div
|
||||
class="photo"
|
||||
v-for="photo of item.photos"
|
||||
:key="photo.key"
|
||||
:style="{
|
||||
height: photo.dispH + 'px',
|
||||
width: photo.dispW + 'px',
|
||||
transform: `translate(${photo.dispX}px, ${photo.dispY}px`,
|
||||
}">
|
||||
}"
|
||||
>
|
||||
<Folder v-if="photo.flag & c.FLAG_IS_FOLDER" :data="photo" />
|
||||
|
||||
<Tag v-else-if="photo.flag & c.FLAG_IS_TAG" :data="photo" />
|
||||
|
||||
<Photo v-else :data="photo" :day="item.day" @select="selectionManager.selectPhoto"
|
||||
@pointerdown="selectionManager.clickPhoto(photo, $event, index)" @touchstart="
|
||||
<Photo
|
||||
v-else
|
||||
:data="photo"
|
||||
:day="item.day"
|
||||
@select="selectionManager.selectPhoto"
|
||||
@pointerdown="selectionManager.clickPhoto(photo, $event, index)"
|
||||
@touchstart="
|
||||
selectionManager.touchstartPhoto(photo, $event, index)
|
||||
" @touchend="selectionManager.touchendPhoto(photo, $event, index)"
|
||||
@touchmove="selectionManager.touchmovePhoto(photo, $event, index)" />
|
||||
"
|
||||
@touchend="selectionManager.touchendPhoto(photo, $event, index)"
|
||||
@touchmove="selectionManager.touchmovePhoto(photo, $event, index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</RecycleScroller>
|
||||
|
||||
<!-- Managers -->
|
||||
<ScrollerManager ref="scrollerManager" :rows="list" :height="scrollerHeight" :recycler="$refs.recycler"
|
||||
:recyclerBefore="$refs.recyclerBefore" />
|
||||
<ScrollerManager
|
||||
ref="scrollerManager"
|
||||
:rows="list"
|
||||
:height="scrollerHeight"
|
||||
:recycler="$refs.recycler"
|
||||
:recyclerBefore="$refs.recyclerBefore"
|
||||
/>
|
||||
|
||||
<SelectionManager ref="selectionManager" :heads="heads" :rows="list" :isreverse="isMonthView"
|
||||
:recycler="$refs.recycler" @refresh="softRefresh" @delete="deleteFromViewWithAnimation"
|
||||
@updateLoading="updateLoading" />
|
||||
<SelectionManager
|
||||
ref="selectionManager"
|
||||
:heads="heads"
|
||||
:rows="list"
|
||||
:isreverse="isMonthView"
|
||||
:recycler="$refs.recycler"
|
||||
@refresh="softRefresh"
|
||||
@delete="deleteFromViewWithAnimation"
|
||||
@updateLoading="updateLoading"
|
||||
/>
|
||||
|
||||
<Viewer ref="viewer" @deleted="deleteFromViewWithAnimation" @fetchDay="fetchDay" @updateLoading="updateLoading" />
|
||||
<Viewer
|
||||
ref="viewer"
|
||||
@deleted="deleteFromViewWithAnimation"
|
||||
@fetchDay="fetchDay"
|
||||
@updateLoading="updateLoading"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -83,7 +140,15 @@ import { subscribe, unsubscribe } from "@nextcloud/event-bus";
|
|||
import NcEmptyContent from "@nextcloud/vue/dist/Components/NcEmptyContent";
|
||||
|
||||
import { getLayout } from "../services/Layout";
|
||||
import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType, MapBoundary } from "../types";
|
||||
import {
|
||||
IDay,
|
||||
IFolder,
|
||||
IHeadRow,
|
||||
IPhoto,
|
||||
IRow,
|
||||
IRowType,
|
||||
MapBoundary,
|
||||
} from "../types";
|
||||
import Folder from "./frame/Folder.vue";
|
||||
import Photo from "./frame/Photo.vue";
|
||||
import Tag from "./frame/Tag.vue";
|
||||
|
|
@ -666,7 +731,6 @@ export default defineComponent({
|
|||
|
||||
/** Fetch timeline main call */
|
||||
async fetchDays(noCache = false) {
|
||||
|
||||
let url = "";
|
||||
if (this.$route.name === "locations") {
|
||||
url = API.Q(API.DAYS_WITH_BOUNDS(this.mapBoundary), this.getQuery());
|
||||
|
|
@ -839,7 +903,10 @@ export default defineComponent({
|
|||
/** API url for Day call */
|
||||
getDayUrl(dayId: number | string) {
|
||||
if (this.$route.name === "locations") {
|
||||
return API.Q(API.DAY_WITH_BOUNDS(dayId, this.mapBoundary), this.getQuery());
|
||||
return API.Q(
|
||||
API.DAY_WITH_BOUNDS(dayId, this.mapBoundary),
|
||||
this.getQuery()
|
||||
);
|
||||
} else {
|
||||
return API.Q(API.DAY(dayId), this.getQuery());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<div class="location-top-matter">
|
||||
<l-map style="height: 100%; width: 100%; margin-right: 3.5em; z-index: 0;" :zoom="zoom" ref="map"
|
||||
@moveend="getBoundary" @zoomend="getBoundary">
|
||||
<l-map
|
||||
style="height: 100%; width: 100%; margin-right: 3.5em; z-index: 0"
|
||||
:zoom="zoom"
|
||||
ref="map"
|
||||
@moveend="getBoundary"
|
||||
@zoomend="getBoundary"
|
||||
>
|
||||
<l-tile-layer :url="url" :attribution="attribution" />
|
||||
<v-marker-cluster>
|
||||
</v-marker-cluster>
|
||||
<v-marker-cluster> </v-marker-cluster>
|
||||
</l-map>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -13,10 +17,10 @@
|
|||
import { defineComponent, PropType } from "vue";
|
||||
import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet";
|
||||
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
|
||||
import "leaflet/dist/leaflet.css"
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { IRow, IPhoto } from "../../types";
|
||||
|
||||
import { Icon } from 'leaflet';
|
||||
import { Icon } from "leaflet";
|
||||
|
||||
type D = Icon.Default & {
|
||||
_getIconUrl?: string;
|
||||
|
|
@ -25,9 +29,9 @@ type D = Icon.Default & {
|
|||
delete (Icon.Default.prototype as D)._getIconUrl;
|
||||
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
|
||||
iconUrl: require('leaflet/dist/images/marker-icon.png'),
|
||||
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
|
||||
iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
|
||||
iconUrl: require("leaflet/dist/images/marker-icon.png"),
|
||||
shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -37,12 +41,12 @@ export default defineComponent({
|
|||
LTileLayer,
|
||||
LMarker,
|
||||
LPopup,
|
||||
'v-marker-cluster': Vue2LeafletMarkerCluster,
|
||||
"v-marker-cluster": Vue2LeafletMarkerCluster,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
name: "locations", // add for test
|
||||
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
attribution:
|
||||
'© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
zoom: 1,
|
||||
|
|
@ -62,7 +66,7 @@ export default defineComponent({
|
|||
getPhotos() {
|
||||
let photos: IPhoto[] = [];
|
||||
return photos;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -82,8 +86,6 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue