RomkeVdMeulen

{
    "openapi": "3.0.2",
    "info": {
        "title": "Ferry - waterfront-backend",
        "version": "1.0.0"
    },
    "servers": [
        {
            "url": "https:\/\/waterfront.sandwaveio.dev"
        }

RomkeVdMeulen

Webdesign links

Forms

• https://adamsilver.io/blog/form-design-from-zero-to-hero-all-in-one-blog-post/
• https://adamsilver.io/blog/live-validation-is-problematic/
• https://adamsilver.io/blog/where-to-put-buttons-on-forms/

Links

• https://www.a11y-collective.com/blog/the-perfect-link/

RomkeVdMeulen

import {HtmlBehaviorResource} from "aurelia-framework";

const orig: (...args: any[]) => any = HtmlBehaviorResource.convention;
HtmlBehaviorResource.convention = function(name: string, ...args: any[]) {
	if (name.endsWith("Component")) {
		name = name.replace(/Component$/, "CustomElement");
	}
	if (name.endsWith("Route")) {
		name = name.replace(/Route$/, "CustomElement");
	}

RomkeVdMeulen

/**
 * Vormt een wrapper om async operaties waarin de staat van de operatie
 * bijgehouden wordt.
 */
export class AsyncContext {

	bezig = false;
	mislukt = false;
	geslaagd = false;

RomkeVdMeulen

// tslint:disable:align ban-types
export type DeepPartial<T> =
	T extends Array<infer U> ? DeepPartialArray<U> :
	T extends ReadonlyArray<infer V> ? DeepPartialReadonlyArray<V> :
	T extends object ? DeepPartialObject<T> :
	T;

export type DeepPartialNoMethods<T> =
	T extends Array<infer U> ? DeepPartialArrayNoMethods<U> :
	T extends ReadonlyArray<infer V> ? DeepPartialReadonlyArrayNoMethods<V> :

RomkeVdMeulen

import {decorateMethod} from "util/objects";

export interface ConfirmUnloadConfig {
	hasUnsavedChanges(): boolean;
	getUnloadConfirmMessage(): string;
}

export function confirmUnload(viewModel: any): any {
	decorateMethod(viewModel, "attached", function attached() {
		const self: ConfirmUnloadConfig = this;

RomkeVdMeulen

<template>
  <router-view></router-view>
</template>

RomkeVdMeulen

<template>
	<div class="element-wrapper ${invoerFocus ? 'focus' : ''} ${invoerRegels.length >= 10 ? 'vol' : ''}"
			e2e="wrapper" data-focus.bind="invoerFocus">
		<ol class="regelnummers" ref="regelnummers" e2e="regelnummer-wrapper" css="height: ${hoogte + 24}px">
			<li repeat.for="i of aantalGetoondeRegels" e2e="regelnummer"
					data-actief.bind="invoerRegels.length > i && invoerRegels[i].trim() !== ''"
					class="regelnummer ${invoerRegels.length > i && invoerRegels[i].trim() !== '' ? 'actief' : ''}"></li>
		</ol>
		<div class="invoer-wrapper">
			<textarea value.bind="invoer" ref="invoerElement" e2e="invoer"

RomkeVdMeulen

import {autoinject, bindable} from "aurelia-framework";

declare const ga: (
	command: "send",
	type: "event",
	category?: string,
	action?: string,
	label?: string,
) => void;

RomkeVdMeulen

interface OperationQueue {
	queue: Promise<void>;
}

export function makeOperationQueue(): OperationQueue {
	return {queue: Promise.resolve()};
}

export function queuedOperation(operationQueue: OperationQueue) {
	return function(_target: any, _key: string, descriptor: TypedPropertyDescriptor<(...args: any[]) => any>) {