style: apply prettier lint

lib/Controller/PageController.php

@@ -66,29 +66,29 @@ class PageController extends Controller
         $this->initialState->provideInitialState(
             'timelinePath',
             $this->config->getUserValue(
-            $uid,
+                $uid,
-            Application::APPNAME,
+                Application::APPNAME,
-            'timelinePath',
+                'timelinePath',
-            'EMPTY'
+                'EMPTY'
-        )
+            )
         );
         $this->initialState->provideInitialState(
             'foldersPath',
             $this->config->getUserValue(
-            $uid,
+                $uid,
-            Application::APPNAME,
+                Application::APPNAME,
-            'foldersPath',
+                'foldersPath',
-            '/'
+                '/'
-        )
+            )
         );
         $this->initialState->provideInitialState(
             'showHidden',
             $this->config->getUserValue(
-            $uid,
+                $uid,
-            Application::APPNAME,
+                Application::APPNAME,
-            'showHidden',
+                'showHidden',
-            false
+                false
-        )
+            )
         );
 
         // Apps enabled

src/components/Timeline.vue

@@ -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"
+    <NcEmptyContent
-      v-if="loading === 0 && list.length === 0">
+      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"
+    <RecycleScroller
-      :emit-update="true" :buffer="800" :skipHover="true" key-field="id" size-field="size" type-field="type"
+      ref="recycler"
-      :updateInterval="100" @update="scrollChange" @resize="handleResizeWithDelay">
+      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"
+          <OnThisDay
-            @load="scrollerManager.adjust()">
+            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 }"
+        <div
-          :style="{ height: item.size + 'px' }" :key="item.id">
+          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
-            height: photo.dispH + 'px',
+            class="photo"
-            width: photo.dispW + 'px',
+            v-for="photo of item.photos"
-            transform: `translate(${photo.dispX}px, ${photo.dispY}px`,
+            :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"
+            <Photo
-              @pointerdown="selectionManager.clickPhoto(photo, $event, index)" @touchstart="
+              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"
+    <ScrollerManager
-      :recyclerBefore="$refs.recyclerBefore" />
+      ref="scrollerManager"
+      :rows="list"
+      :height="scrollerHeight"
+      :recycler="$refs.recycler"
+      :recyclerBefore="$refs.recyclerBefore"
+    />
 
-    <SelectionManager ref="selectionManager" :heads="heads" :rows="list" :isreverse="isMonthView"
+    <SelectionManager
-      :recycler="$refs.recycler" @refresh="softRefresh" @delete="deleteFromViewWithAnimation"
+      ref="selectionManager"
-      @updateLoading="updateLoading" />
+      :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());
       }
@@ -1313,7 +1380,7 @@ export default defineComponent({
   padding-left: 3px;
   font-size: 0.9em;
 
-  >div {
+  > div {
     position: relative;
 
     &.super {
@@ -1381,7 +1448,7 @@ export default defineComponent({
 .recycler-before {
   width: 100%;
 
-  >.text {
+  > .text {
     font-size: 1.2em;
     padding-top: 13px;
     padding-left: 8px;

src/components/top-matter/LocationTopMatter.vue

@@ -1,89 +1,91 @@
 <template>
-    <div class="location-top-matter">
+  <div class="location-top-matter">
-        <l-map style="height: 100%; width: 100%; margin-right: 3.5em; z-index: 0;" :zoom="zoom" ref="map"
+    <l-map
-            @moveend="getBoundary" @zoomend="getBoundary">
+      style="height: 100%; width: 100%; margin-right: 3.5em; z-index: 0"
-            <l-tile-layer :url="url" :attribution="attribution" />
+      :zoom="zoom"
-            <v-marker-cluster>
+      ref="map"
-            </v-marker-cluster>
+      @moveend="getBoundary"
-        </l-map>
+      @zoomend="getBoundary"
-    </div>
+    >
+      <l-tile-layer :url="url" :attribution="attribution" />
+      <v-marker-cluster> </v-marker-cluster>
+    </l-map>
+  </div>
 </template>
 
 <script lang="ts">
 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;
+  _getIconUrl?: string;
 };
 
 delete (Icon.Default.prototype as D)._getIconUrl;
 
 Icon.Default.mergeOptions({
-    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
-    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  iconUrl: require("leaflet/dist/images/marker-icon.png"),
-    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
 });
 
 export default defineComponent({
-    name: "LocationTopMatter",
+  name: "LocationTopMatter",
-    components: {
+  components: {
-        LMap,
+    LMap,
-        LTileLayer,
+    LTileLayer,
-        LMarker,
+    LMarker,
-        LPopup,
+    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",
+    attribution:
+      '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+    zoom: 1,
+  }),
+
+  watch: {
+    $route: function (from: any, to: any) {
+      this.createMatter();
+    },
+  },
+
+  mounted() {
+    this.createMatter();
+  },
+
+  computed: {
+    getPhotos() {
+      let photos: IPhoto[] = [];
+      return photos;
+    },
+  },
+
+  methods: {
+    createMatter() {
+      this.name = <string>this.$route.params.name || "";
     },
 
-    data: () => ({
+    getBoundary() {
-        name: "locations", // add for test
+      let map = this.$refs.map as LMap;
-        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      let boundary = map.mapObject.getBounds();
-        attribution:
+      this.$parent.$emit("updateBoundary", {
-            '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+        minLat: boundary.getSouth(),
-        zoom: 1,
+        maxLat: boundary.getNorth(),
-    }),
+        minLng: boundary.getWest(),
-
+        maxLng: boundary.getEast(),
-    watch: {
+      });
-        $route: function (from: any, to: any) {
-            this.createMatter();
-        },
-    },
-
-    mounted() {
-        this.createMatter();
-    },
-
-    computed: {
-        getPhotos() {
-            let photos: IPhoto[] = [];
-            return photos;
-        }
-    },
-
-    methods: {
-        createMatter() {
-            this.name = <string>this.$route.params.name || "";
-        },
-
-        getBoundary() {
-            let map = this.$refs.map as LMap;
-            let boundary = map.mapObject.getBounds();
-            this.$parent.$emit("updateBoundary", {
-                minLat: boundary.getSouth(),
-                maxLat: boundary.getNorth(),
-                minLng: boundary.getWest(),
-                maxLng: boundary.getEast(),
-            });
-        },
     },
+  },
 });
-
-
 </script>
 
 <style lang="scss" scoped>
@@ -92,8 +94,8 @@ export default defineComponent({
 @import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
 
 .location-top-matter {
-    display: flex;
+  display: flex;
-    vertical-align: middle;
+  vertical-align: middle;
-    height: 20em;
+  height: 20em;
 }
 </style>