1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00

Merge pull request #642 from immich-app/add/ci-web-checks

Add web test / check commands and workflow to run in CI
This commit is contained in:
Jaime Baez 2022-09-08 19:12:39 +02:00 committed by GitHub
commit cc79ff1ca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
47 changed files with 324 additions and 274 deletions

View File

@ -28,3 +28,14 @@ jobs:
- name: Run tests
run: cd server && npm ci && npm run check:all
web-unit-tests:
name: Run web unit test suites and checks
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Run tests
run: cd web && npm ci && npm run check:all

32
dev-setup.md Normal file
View File

@ -0,0 +1,32 @@
# Development Setup
## Lint / format extensions
Setting these in the IDE give a better developer experience auto-formatting code on save and providing instant feedback on lint issues.
### VSCode
Install Prettier, ESLint and Svelte extensions.
in User `settings.json` (`cmd + shift + p` and search for Open User Settings JSON) add the following:
```json
{
"editor.formatOnSave": true,
"[javascript][typescript][css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.formatOnSave": true
},
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode",
"editor.tabSize": 2
},
"svelte.enable-ts-plugin": true,
"eslint.validate": ["javascript", "svelte"]
}
```
## Running tests / checks
In both server and web:
`npm run check:all`

View File

@ -16,5 +16,8 @@ module.exports = {
browser: true,
es2017: true,
node: true
},
globals: {
NodeJS: true
}
};

View File

@ -6,6 +6,9 @@ node_modules
.env
.env.*
!.env.example
src/api/open-api
*.md
*.json
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml

View File

@ -6,10 +6,14 @@
"build": "vite build",
"package": "svelte-kit package",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check --plugin-search-dir=. . && eslint .",
"format": "prettier --write --plugin-search-dir=. .",
"check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
"check:watch": "npm run check -- --watch",
"check:code": "npm run format && npm run lint && npm run check",
"check:all": "npm run check:code && npm test",
"lint": "eslint . --max-warnings 0",
"lint:fix": "npm run lint -- --fix",
"format": "prettier --check --plugin-search-dir=. .",
"format:fix": "prettier --write --plugin-search-dir=. .",
"test": "jest",
"test:watch": "npm test -- --watch"
},

View File

@ -1,5 +1,4 @@
import { AssetCountByTimeGroupResponseDto } from '@api';
let _basePath = '/api';
const _basePath = '/api';
export function getFileUrl(aid: string, did: string, isThumb?: boolean, isWeb?: boolean) {
const urlObj = new URL(`${window.location.origin}${_basePath}/asset/file`);

View File

@ -6,86 +6,86 @@
@tailwind utilities;
:root {
font-family: 'Work Sans', sans-serif;
/* --immich-icon-button-hover-color: #d3d3d3; */
font-family: 'Work Sans', sans-serif;
/* --immich-icon-button-hover-color: #d3d3d3; */
}
html {
height: 100%;
width: 100%;
height: 100%;
width: 100%;
}
html::-webkit-scrollbar {
width: 8px;
width: 8px;
}
/* Track */
html::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 16px;
background: #f1f1f1;
border-radius: 16px;
}
/* Handle */
html::-webkit-scrollbar-thumb {
background: rgba(85, 86, 87, 0.408);
border-radius: 16px;
background: rgba(85, 86, 87, 0.408);
border-radius: 16px;
}
/* Handle on hover */
html::-webkit-scrollbar-thumb:hover {
background: #4250afad;
border-radius: 16px;
background: #4250afad;
border-radius: 16px;
}
body {
/* min-height: 100vh; */
margin: 0;
background-color: #f6f8fe;
color: #5f6368;
/* min-height: 100vh; */
margin: 0;
background-color: #f6f8fe;
color: #5f6368;
}
input:focus-visible {
outline-offset: 0px !important;
outline: none !important;
outline-offset: 0px !important;
outline: none !important;
}
@layer utilities {
.immich-form-input {
@apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm ;
}
.immich-form-input {
@apply bg-slate-100 p-2 rounded-md focus:border-immich-primary text-sm;
}
.immich-form-label {
@apply font-medium text-sm text-gray-500;
}
.immich-form-label {
@apply font-medium text-sm text-gray-500;
}
.immich-btn-primary {
@apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium;
}
.immich-btn-primary {
@apply bg-immich-primary text-gray-100 border rounded-xl py-2 px-4 transition-all duration-150 hover:bg-immich-primary hover:shadow-lg text-sm font-medium;
}
.immich-text-button {
@apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
}
.immich-text-button {
@apply flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 p-2 rounded-lg font-medium;
}
/* width */
.immich-scrollbar::-webkit-scrollbar {
width: 8px;
}
/* width */
.immich-scrollbar::-webkit-scrollbar {
width: 8px;
}
/* Track */
.immich-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 16px;
}
/* Track */
.immich-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 16px;
}
/* Handle */
.immich-scrollbar::-webkit-scrollbar-thumb {
background: rgba(85, 86, 87, 0.408);
border-radius: 16px;
}
/* Handle */
.immich-scrollbar::-webkit-scrollbar-thumb {
background: rgba(85, 86, 87, 0.408);
border-radius: 16px;
}
/* Handle on hover */
.immich-scrollbar::-webkit-scrollbar-thumb:hover {
background: #4250afad;
border-radius: 16px;
}
/* Handle on hover */
.immich-scrollbar::-webkit-scrollbar-thumb:hover {
background: #4250afad;
border-radius: 16px;
}
}

View File

@ -15,12 +15,11 @@
import { AlbumResponseDto, api, ThumbnailFormat } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import { fly } from 'svelte/transition';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
export let album: AlbumResponseDto;
let imageData: string = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
let imageData = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
const dispatchClick = createEventDispatcher<OnClick>();
const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
@ -29,7 +28,7 @@
return;
}
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, {
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId, ThumbnailFormat.Jpeg, {
responseType: 'blob'
});

View File

@ -11,7 +11,6 @@
import CircleAvatar from '../shared-components/circle-avatar.svelte';
import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
import AssetSelection from './asset-selection.svelte';
import _ from 'lodash-es';
import UserSelectionModal from './user-selection-modal.svelte';
import ShareInfoModal from './share-info-modal.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
@ -53,8 +52,7 @@
let currentViewAssetIndex = 0;
let viewWidth: number;
let thumbnailSize: number = 300;
let border = '';
let thumbnailSize = 300;
let backUrl = '/albums';
let currentAlbumName = '';
let currentUser: UserResponseDto;

View File

@ -2,9 +2,7 @@
import { createEventDispatcher } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
const dispatch = createEventDispatcher();

View File

@ -18,7 +18,7 @@
$: {
appearsInAlbums = [];
api.albumApi.getAllAlbums(undefined, asset.id).then(result => {
api.albumApi.getAllAlbums(undefined, asset.id).then((result) => {
appearsInAlbums = result.data;
});
}
@ -29,12 +29,14 @@
let isShowDetail = false;
let appearsInAlbums: AlbumResponseDto[] = [];
const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
onMount(() => {
document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
document.addEventListener('keydown', onKeyboardPress);
});
onDestroy(() => {
document.removeEventListener('keydown', (e) => {});
document.removeEventListener('keydown', onKeyboardPress);
});
const handleKeyboardPress = (key: string) => {

View File

@ -9,10 +9,14 @@
import { browser } from '$app/env';
import { AssetResponseDto, AlbumResponseDto } from '@api';
type Leaflet = typeof import('leaflet');
type LeafletMap = import('leaflet').Map;
type LeafletMarker = import('leaflet').Marker;
// Map Property
let map: any;
let leaflet: any;
let marker: any;
let map: LeafletMap;
let leaflet: Leaflet;
let marker: LeafletMarker;
export let asset: AssetResponseDto;
$: if (asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null) {
@ -31,7 +35,6 @@
async function drawMap(lat: number, lon: number) {
if (!leaflet) {
// @ts-ignore
leaflet = await import('leaflet');
}

View File

@ -10,7 +10,7 @@
export let root: HTMLElement | null = null;
let intersecting = false;
let container: any;
let container: HTMLDivElement;
const dispatch = createEventDispatcher();
onMount(() => {

View File

@ -33,7 +33,9 @@
const assetData = URL.createObjectURL(data);
return assetData;
} catch (e) {}
} catch {
// Do nothing
}
};
</script>

View File

@ -1,7 +1,7 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { createEventDispatcher, onMount } from 'svelte';
import { onMount } from 'svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, AssetResponseDto, getFileUrl } from '@api';
@ -9,8 +9,6 @@
let asset: AssetResponseDto;
const dispatch = createEventDispatcher();
let videoPlayerNode: HTMLVideoElement;
let isVideoLoading = true;
let videoUrl: string;

View File

@ -5,8 +5,8 @@
let error: string;
let success: string;
let password: string = '';
let confirmPassowrd: string = '';
let password = '';
let confirmPassowrd = '';
let canRegister = false;

View File

@ -6,8 +6,8 @@
let error: string;
let success: string;
let password: string = '';
let confirmPassowrd: string = '';
let password = '';
let confirmPassowrd = '';
let changeChagePassword = false;

View File

@ -1,122 +1,121 @@
<script lang="ts">
import { api } from '@api';
import { createEventDispatcher } from 'svelte';
import { api } from '@api';
import { createEventDispatcher } from 'svelte';
let error: string;
let success: string;
let error: string;
let success: string;
let password = '';
let confirmPassowrd = '';
let password = '';
let confirmPassowrd = '';
let canCreateUser = false;
let canCreateUser = false;
$: {
if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
error = 'Password does not match';
canCreateUser = false;
} else {
error = '';
canCreateUser = true;
}
}
const dispatch = createEventDispatcher();
$: {
if (password !== confirmPassowrd && confirmPassowrd.length > 0) {
error = 'Password does not match';
canCreateUser = false;
} else {
error = '';
canCreateUser = true;
}
}
const dispatch = createEventDispatcher();
async function registerUser(event: SubmitEvent) {
if (canCreateUser) {
error = '';
async function registerUser(event: SubmitEvent) {
if (canCreateUser) {
error = '';
const formElement = event.target as HTMLFormElement;
const formElement = event.target as HTMLFormElement;
const form = new FormData(formElement);
const form = new FormData(formElement);
const email = form.get('email');
const password = form.get('password');
const firstName = form.get('firstName');
const lastName = form.get('lastName');
const email = form.get('email');
const password = form.get('password');
const firstName = form.get('firstName');
const lastName = form.get('lastName');
const {status} = await api.userApi.createUser({
email: String(email),
password: String(password),
firstName: String(firstName),
lastName: String(lastName)
});
const { status } = await api.userApi.createUser({
email: String(email),
password: String(password),
firstName: String(firstName),
lastName: String(lastName)
});
if (status === 201) {
success = 'New user created';
if (status === 201) {
success = 'New user created';
dispatch('user-created');
return;
} else {
error = 'Error create user account';
}
}
}
dispatch('user-created');
return;
} else {
error = 'Error create user account';
}
}
}
</script>
<div class="border bg-white p-4 shadow-sm w-[500px] rounded-3xl py-8">
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo"/>
<h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
Please provide your user with the password, they will have to change it on their first sign
in.
</p>
</div>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
<h1 class="text-2xl text-immich-primary font-medium">Create new user</h1>
<p class="text-sm border rounded-md p-4 font-mono text-gray-600">
Please provide your user with the password, they will have to change it on their first sign
in.
</p>
</div>
<form on:submit|preventDefault={registerUser} autocomplete="off">
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="email">Email</label>
<input class="immich-form-input" id="email" name="email" type="email" required/>
</div>
<form on:submit|preventDefault={registerUser} autocomplete="off">
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="email">Email</label>
<input class="immich-form-input" id="email" name="email" type="email" required />
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="password">Password</label>
<input
class="immich-form-input"
id="password"
name="password"
type="password"
required
bind:value={password}
/>
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="password">Password</label>
<input
class="immich-form-input"
id="password"
name="password"
type="password"
required
bind:value={password}
/>
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
<input
class="immich-form-input"
id="confirmPassword"
name="password"
type="password"
required
bind:value={confirmPassowrd}
/>
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="confirmPassword">Confirm Password</label>
<input
class="immich-form-input"
id="confirmPassword"
name="password"
type="password"
required
bind:value={confirmPassowrd}
/>
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="firstName">First Name</label>
<input class="immich-form-input" id="firstName" name="firstName" type="text" required/>
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="firstName">First Name</label>
<input class="immich-form-input" id="firstName" name="firstName" type="text" required />
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="lastName">Last Name</label>
<input class="immich-form-input" id="lastName" name="lastName" type="text" required/>
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="lastName">Last Name</label>
<input class="immich-form-input" id="lastName" name="lastName" type="text" required />
</div>
{#if error}
<p class="text-red-400 ml-4 text-sm">{error}</p>
{/if}
{#if error}
<p class="text-red-400 ml-4 text-sm">{error}</p>
{/if}
{#if success}
<p class="text-immich-primary ml-4 text-sm">{success}</p>
{/if}
<div class="flex w-full">
<button
type="submit"
class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
>Create
</button
>
</div>
</form>
{#if success}
<p class="text-immich-primary ml-4 text-sm">{success}</p>
{/if}
<div class="flex w-full">
<button
type="submit"
class="m-4 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
>Create
</button>
</div>
</form>
</div>

View File

@ -14,7 +14,6 @@
const dispatch = createEventDispatcher();
// eslint-disable-next-line no-undef
const editUser = async (event: SubmitEvent) => {
try {
const formElement = event.target as HTMLFormElement;
@ -25,8 +24,8 @@
const { status } = await api.userApi.updateUser({
id: user.id,
firstName: firstName!.toString(),
lastName: lastName!.toString()
firstName: firstName?.toString(),
lastName: lastName?.toString()
});
if (status == 200) {

View File

@ -4,8 +4,8 @@
import { createEventDispatcher } from 'svelte';
let error: string;
let email: string = '';
let password: string = '';
let email = '';
let password = '';
const dispatch = createEventDispatcher();

View File

@ -7,7 +7,6 @@
import lodash from 'lodash-es';
import moment from 'moment';
import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
import { createEventDispatcher } from 'svelte';
import {
assetInteractionStore,
assetsInAlbumStoreState,
@ -22,7 +21,7 @@
let isMouseOverGroup = false;
let actualBucketHeight: number;
let hoveredDateGroup: string = '';
let hoveredDateGroup = '';
$: assetsGroupByDate = lodash
.chain(assets)
.groupBy((a) => moment(a.createdAt).format('ddd, MMM DD YYYY'))

View File

@ -1,8 +1,5 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
import FullScreenModal from './full-screen-modal.svelte';
export let localVersion: string;
export let remoteVersion: string;

View File

@ -22,7 +22,7 @@
onDestroy(() => {
if (browser) {
window.onscroll = function () {};
window.onscroll = null;
}
});
</script>

View File

@ -5,7 +5,7 @@
export let user: UserResponseDto;
// Avatar Size In Pixel
export let size: number = 48;
export let size = 48;
const dispatch = createEventDispatcher();

View File

@ -4,10 +4,12 @@
*/
import { createEventDispatcher } from 'svelte';
// TODO: why any here?
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let logo: any;
export let backgroundColor: string = 'transparent';
export let hoverColor: string = '#e2e7e9';
export let logoColor: string = '#5f6368';
export let backgroundColor = 'transparent';
export let hoverColor = '#e2e7e9';
export let logoColor = '#5f6368';
export let size = '24';
export let title = '';
let iconButton: HTMLButtonElement;

View File

@ -6,15 +6,13 @@
/**
* x coordiante of the context menu.
* @type {number}
*/
export let x: number = 0;
export let x = 0;
/**
* x coordiante of the context menu.
* @type {number}
*/
export let y: number = 0;
export let y = 0;
const dispatch = createEventDispatcher();

View File

@ -12,21 +12,23 @@
const dispatch = createEventDispatcher();
const onScroll = () => {
if (window.pageYOffset > 80) {
appBarBorder = 'border border-gray-200 bg-gray-50';
} else {
appBarBorder = 'bg-immich-bg border border-transparent';
}
};
onMount(() => {
if (browser) {
document.addEventListener('scroll', (e) => {
if (window.pageYOffset > 80) {
appBarBorder = 'border border-gray-200 bg-gray-50';
} else {
appBarBorder = 'bg-immich-bg border border-transparent';
}
});
document.addEventListener('scroll', onScroll);
}
});
onDestroy(() => {
if (browser) {
document.removeEventListener('scroll', (e) => {});
document.removeEventListener('scroll', onScroll);
}
});
</script>

View File

@ -6,7 +6,7 @@
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
import LoadingSpinner from './loading-spinner.svelte';
import { api, AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
import { AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
const dispatch = createEventDispatcher();
@ -14,14 +14,14 @@
export let groupIndex = 0;
export let thumbnailSize: number | undefined = undefined;
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
export let selected: boolean = false;
export let disabled: boolean = false;
export let selected = false;
export let disabled = false;
let imageData: string;
let mouseOver: boolean = false;
let mouseOver = false;
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
let mouseOverIcon: boolean = false;
let mouseOverIcon = false;
let videoPlayerNode: HTMLVideoElement;
let isThumbnailVideoPlaying = false;
let calculateVideoDurationIntervalHandler: NodeJS.Timer;

View File

@ -2,7 +2,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { createEventDispatcher, onMount } from 'svelte';
import { fade, fly, slide } from 'svelte/transition';
import { fade, fly } from 'svelte/transition';
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
import { clickOutside } from '../../utils/click-outside';
import { api, UserResponseDto } from '@api';

View File

@ -3,13 +3,10 @@
/**
* Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
*
* @param {HTMLElement} el
* @param {HTMLElement|string} target DOM Element or CSS Selector
*/
export function portal(el: any, target: any = 'body') {
export function portal(el: HTMLElement, target: HTMLElement | string = 'body') {
let targetEl;
async function update(newTarget: any) {
async function update(newTarget: HTMLElement | string) {
target = newTarget;
if (typeof target === 'string') {
targetEl = document.querySelector(target);

View File

@ -3,14 +3,14 @@
import { SegmentScrollbarLayout } from './segment-scrollbar-layout';
export let scrollTop = 0;
export let viewportWidth = 0;
// export let viewportWidth = 0;
export let scrollbarHeight = 0;
let timelineHeight = 0;
let segmentScrollbarLayout: SegmentScrollbarLayout[] = [];
let isHover = false;
let hoveredDate: Date;
let currentMouseYLocation: number = 0;
let currentMouseYLocation = 0;
let scrollbarPosition = 0;
$: {
@ -34,30 +34,28 @@
onMount(() => {
// segmentScrollbarLayout = getLayoutDistance();
return () => {};
});
const getSegmentHeight = (groupCount: number) => {
// if (segmentData.groups.length > 0) {
// const percentage = (groupCount * 100) / segmentData.totalAssets;
// return Math.round((percentage * scrollbarHeight) / 100);
// } else {
// return 0;
// }
};
// const getSegmentHeight = (groupCount: number) => {
// if (segmentData.groups.length > 0) {
// const percentage = (groupCount * 100) / segmentData.totalAssets;
// return Math.round((percentage * scrollbarHeight) / 100);
// } else {
// return 0;
// }
// };
const getLayoutDistance = () => {
// let result: SegmentScrollbarLayout[] = [];
// for (const segment of segmentData.groups) {
// let segmentLayout = new SegmentScrollbarLayout();
// segmentLayout.count = segment.count;
// segmentLayout.height = getSegmentHeight(segment.count);
// segmentLayout.timeGroup = segment.timeGroup;
// result.push(segmentLayout);
// }
// return result;
};
// const getLayoutDistance = () => {
// let result: SegmentScrollbarLayout[] = [];
// for (const segment of segmentData.groups) {
// let segmentLayout = new SegmentScrollbarLayout();
// segmentLayout.count = segment.count;
// segmentLayout.height = getSegmentHeight(segment.count);
// segmentLayout.timeGroup = segment.timeGroup;
// result.push(segmentLayout);
// }
// return result;
// };
const handleMouseMove = (e: MouseEvent, currentDate: Date) => {
currentMouseYLocation = e.clientY - 71 - 30;

View File

@ -1,5 +1,7 @@
<script lang="ts">
export let title: string;
// TODO: why `any` here? There should be a expected type for this
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let logo: any;
export let actionType: AdminSideBarSelection | AppSideBarSelection;
export let isSelected: boolean;

View File

@ -8,13 +8,13 @@
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import SideBarButton from './side-bar-button.svelte';
import StatusBox from '../status-box.svelte';
import { AlbumCountResponseDto, api, AssetCountByUserIdResponseDto } from '@api';
import { api } from '@api';
import { fade } from 'svelte/transition';
import LoadingSpinner from '../loading-spinner.svelte';
let selectedAction: AppSideBarSelection;
let showAssetCount: boolean = false;
let showAssetCount = false;
let showSharingCount = false;
let showAlbumsCount = false;

View File

@ -5,8 +5,6 @@
import CloudUploadOutline from 'svelte-material-icons/CloudUploadOutline.svelte';
import WindowMinimize from 'svelte-material-icons/WindowMinimize.svelte';
import type { UploadAsset } from '$lib/models/upload-asset';
import { goto } from '$app/navigation';
import { assetStore } from '$lib/stores/assets.store';
import { notificationController, NotificationType } from './notification/notification';
let showDetail = true;
@ -22,9 +20,13 @@
const blob = new Blob([arrayBufferView], { type: 'image/jpeg' });
const urlCreator = window.URL || window.webkitURL;
const imageUrl = urlCreator.createObjectURL(blob);
// TODO: There is probably a cleaner way of doing this
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const img: any = document.getElementById(`${a.id}`);
img.src = imageUrl;
} catch (e) {}
} catch {
// Do nothing?
}
}
};

View File

@ -1,6 +1,5 @@
<script lang="ts">
import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
export let album: AlbumResponseDto;
@ -11,7 +10,7 @@
return '/no-thumbnail.png';
}
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, {
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId, ThumbnailFormat.Webp, {
responseType: 'blob'
});
if (data instanceof Blob) {

View File

@ -1,2 +1,2 @@
import { env } from '$env/dynamic/public';
export const loginPageMessage: string = env.PUBLIC_LOGIN_PAGE_MESSAGE;
export const loginPageMessage: string = env.PUBLIC_LOGIN_PAGE_MESSAGE;

View File

@ -16,17 +16,17 @@ export class AssetGridState {
* The total height of the timeline in pixel
* This value is first estimated by the number of asset and later is corrected as the user scroll
*/
timelineHeight: number = 0;
timelineHeight = 0;
/**
* The fixed viewport height in pixel
*/
viewportHeight: number = 0;
viewportHeight = 0;
/**
* The fixed viewport width in pixel
*/
viewportWidth: number = 0;
viewportWidth = 0;
/**
* List of bucket information

View File

@ -1,9 +1,6 @@
import { TimeGroupEnum } from './../../api/open-api/api';
import { writable, derived, readable } from 'svelte/store';
import { writable } from 'svelte/store';
import lodash from 'lodash-es';
import _ from 'lodash';
import moment from 'moment';
import { api, AssetCountByTimeBucketResponseDto, AssetResponseDto } from '@api';
import { api, AssetCountByTimeBucketResponseDto } from '@api';
import { AssetGridState } from '$lib/models/asset-grid-state';
import { calculateViewportHeightByNumberOfAsset } from '$lib/utils/viewport-utils';
@ -24,7 +21,7 @@ function createAssetStore() {
_loadingBucketState = state;
});
/**
* Set intial state
* Set initial state
* @param viewportHeight
* @param viewportWidth
* @param data
@ -78,6 +75,7 @@ function createAssetStore() {
return state;
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (e: any) {
if (e.name === 'CanceledError') {
return;

View File

@ -19,7 +19,8 @@ export const openWebsocketConnection = () => {
};
const listenToEvent = (socket: Socket) => {
socket.on('on_upload_success', (data) => {});
//TODO: if we are not using this, we should probably remove it?
socket.on('on_upload_success', () => undefined);
socket.on('error', (e) => {
console.log('Websocket Error', e);

View File

@ -1,6 +1,7 @@
export function clickOutside(node: Node) {
const handleClick = (event: any) => {
if (!node.contains(event.target)) {
const handleClick = (event: Event) => {
const targetNode = event.target as Node | null;
if (!node.contains(targetNode)) {
node.dispatchEvent(new CustomEvent('out-click'));
}
};

View File

@ -27,14 +27,18 @@ export enum UploadType {
export const openFileUploadDialog = (uploadType: UploadType) => {
try {
let fileSelector = document.createElement('input');
const fileSelector = document.createElement('input');
fileSelector.type = 'file';
fileSelector.multiple = true;
fileSelector.accept = 'image/*,video/*,.heic,.heif,.dng,.3gp';
fileSelector.onchange = async (e: any) => {
const files = Array.from<File>(e.target.files);
fileSelector.onchange = async (e: Event) => {
const target = e.target as HTMLInputElement;
if (!target.files) {
return;
}
const files = Array.from<File>(target.files);
if (files.length > 50) {
notificationController.show({
@ -67,6 +71,7 @@ export const openFileUploadDialog = (uploadType: UploadType) => {
}
};
//TODO: should probably use the @api SDK
async function fileUploader(asset: File, uploadType: UploadType) {
const assetType = asset.type.split('/')[0].toUpperCase();
const temp = asset.name.split('.');
@ -123,9 +128,10 @@ async function fileUploader(asset: File, uploadType: UploadType) {
if (status === 200) {
if (data.isExist) {
if (uploadType === UploadType.ALBUM && data.id) {
const dataId = data.id;
if (uploadType === UploadType.ALBUM && dataId) {
albumUploadAssetStore.asset.update((a) => {
return [...a, data.id!];
return [...a, dataId];
});
}
return;
@ -145,7 +151,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
uploadAssetsStore.addNewUploadAsset(newUploadAsset);
};
request.upload.onload = (event) => {
request.upload.onload = () => {
setTimeout(() => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
}, 1000);
@ -170,7 +176,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
};
// listen for `error` event
request.upload.onerror = (event) => {
request.upload.onerror = () => {
uploadAssetsStore.removeUploadAsset(deviceAssetId);
};
@ -192,9 +198,10 @@ async function fileUploader(asset: File, uploadType: UploadType) {
console.log('error uploading file ', e);
}
}
// TODO: This should have a proper type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function handleUploadError(asset: File, respBody?: any) {
let extraMsg = respBody ? ' ' + respBody.message : '';
const extraMsg = respBody ? ' ' + respBody.message : '';
notificationController.show({
type: NotificationType.Error,

View File

@ -1,4 +1,4 @@
import { serverApi, TimeGroupEnum } from '@api';
import { serverApi } from '@api';
import * as cookieParser from 'cookie';
import type { LayoutServerLoad } from './$types';

View File

@ -7,7 +7,6 @@
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
import { onMount } from 'svelte';
import { checkAppVersion } from '$lib/utils/check-app-version';
import { page } from '$app/stores';
import { afterNavigate, beforeNavigate } from '$app/navigation';
import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';

View File

@ -1,5 +1,5 @@
import { redirect } from '@sveltejs/kit';
import { serverApi, UserResponseDto } from '@api';
import { serverApi } from '@api';
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ parent }) => {

View File

@ -1,6 +1,6 @@
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { AlbumResponseDto, serverApi } from '@api';
import { serverApi } from '@api';
export const load: PageServerLoad = async ({ parent }) => {
try {

View File

@ -6,8 +6,6 @@
import type { PageData } from './$types';
import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
import { onMount } from 'svelte';
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
import {
assetInteractionStore,
isMultiSelectStoreState,

View File

@ -1,6 +1,6 @@
import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-node';
import path from 'path';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),