mockaton 12.7.1 → 13.0.0

package/src/client/app.css

@@ -1,24 +1,25 @@
 :root {
 	color-scheme: light dark;
-	--colorBackground: light-dark(#fff, #181818);
-	--colorInputBackground: light-dark(#fff, #222);
-	--colorSecondaryButtonBackground: light-dark(#fcfcfc, #2c2c2c);
-	--colorHeaderBackground: light-dark(#f2f2f3, #141414);
-	--colorComboBoxBackground: light-dark(#eee, #2a2a2a);
+	--colorBg: light-dark(#fff, #181818);
+	--colorBgField: light-dark(#fcfcfc, #2c2c2c);
+
+	--colorBgHeader: light-dark(#f2f2f3, #141414);
+	--colorBgHeaderField: light-dark(#fff, #222);
+
 	--colorBorder: light-dark(#e0e0e0, #323232);
 	--colorBorderActive: light-dark(#c8c8c8, #3c3c3c);
-	--colorSecondaryAction: light-dark(#666, #aaa);
+
 	--colorLabel: light-dark(#555, #aaa);
-	--colorDisabledMockSelector: light-dark(#444, #a9b9b9);
 	--colorText: light-dark(#000, #fff);
 
 	--colorAccent: light-dark(#0059dd, #2495ff);
-	--colorHover: light-dark(rgba(119, 193, 255, 0.4), rgba(0, 63, 115, 0.5));
+	--colorHover: light-dark(#bbe0ff, #062d59);
+
 	--colorRed: light-dark(#da0f00, #f41606);
 	--colorPink: light-dark(#ed206a, #f92672);
 	--colorPurple: light-dark(#9b71e8, #ae81ff);
 	--colorGreen: light-dark(#388e3c, #a6e22e);
-	--color4xxBackground: light-dark(#ffedd1, #68554a);
+	--colorBg4xx: light-dark(#ffedd1, #68554a);
 
 	accent-color: var(--colorAccent);
 	--radius: 16px;
@@ -33,7 +34,7 @@ body {
 body {
 	display: grid;
 	grid-template-rows: auto 1fr;
-	background: var(--colorBackground);
+	background: var(--colorBg);
 	color: var(--colorText);
 	font-family: system-ui, sans-serif;
 }
@@ -46,7 +47,7 @@ body {
 	font-family: inherit;
 	font-size: 100%;
 	scrollbar-width: thin;
-	corner-shape: squircle
+	corner-shape: squircle;
 }
 
 a:focus-visible,
@@ -88,12 +89,14 @@ select {
 
 	&:enabled {
 		border-color: var(--colorBorder);
-		background-color: var(--colorSecondaryButtonBackground);
+		background-color: var(--colorBgField);
+
 		&:hover {
 			border-color: var(--colorHover);
 			background-color: var(--colorHover);
 		}
 	}
+
 	&:disabled {
 		cursor: not-allowed;
 		opacity: 50%;
@@ -105,13 +108,13 @@ header {
 	display: flex;
 	flex: 0 0 100%;
 	padding: 16px;
-	background: var(--colorHeaderBackground);
+	background: var(--colorBgHeader);
 
 	.Logo {
 		align-self: end;
 		margin-right: 22px;
 		margin-bottom: 3px;
-		opacity: 90%;
+		opacity: 94%;
 		transition: opacity 240ms ease-in-out;
 
 		&:hover {
@@ -186,7 +189,7 @@ header {
 		align-self: end;
 		margin-left: auto;
 		border-radius: 50%;
-		fill: var(--colorSecondaryAction);
+		fill: var(--colorLabel);
 
 		&:hover {
 			fill: var(--colorAccent);
@@ -227,7 +230,7 @@ header {
 		margin-top: 2px;
 		color: var(--colorText);
 		font-size: 11px;
-		background-color: var(--colorInputBackground);
+		background-color: var(--colorBgHeaderField);
 		border-radius: var(--radius);
 	}
 
@@ -256,6 +259,11 @@ header {
 
 	&.GlobalDelayJitter {
 		width: 80px;
+
+		&:focus-within {
+			z-index: 100;
+		}
+
 		span {
 			margin-left: 4px;
 		}
@@ -264,9 +272,6 @@ header {
 			border-bottom-left-radius: 0;
 			border-top-left-radius: 0;
 		}
-		&:focus-within {
-			z-index: 100;
-		}
 	}
 
 	&.CookieSelector {
@@ -294,6 +299,7 @@ header {
 			input:enabled + .checkboxBody {
 				cursor: pointer;
 			}
+
 			input:disabled {
 				cursor: not-allowed;
 			}
@@ -306,9 +312,6 @@ header {
 }
 
 
-
-
-
 main {
 	display: flex;
 	min-width: 0;
@@ -354,6 +357,7 @@ main {
 			&:active {
 				border-color: var(--colorBorderActive);
 			}
+
 			&::before,
 			&::after {
 				position: absolute;
@@ -363,7 +367,7 @@ main {
 			&::before {
 				top: calc(50% + 6px);
 				height: 22px;
-				border-left: 3px solid var(--colorBackground);
+				border-left: 2px solid var(--colorBg);
 			}
 			&::after {
 				top: calc(50% + 10px);
@@ -382,10 +386,11 @@ main {
 	padding-right: 14px;
 	padding-left: 16px;
 	border-bottom: 1px solid var(--colorBorder);
-	background: var(--colorHeaderBackground);
+	background: var(--colorBgHeader);
 }
 
-.GroupByMethod {
+.GroupByMethod,
+.ViewSourceCheckbox {
 	display: flex;
 	align-items: center;
 	gap: 6px;
@@ -402,7 +407,7 @@ main {
 		text-align-last: center;
 		color: var(--colorText);
 		font-size: 11px;
-		background-color: var(--colorInputBackground);
+		background-color: var(--colorBgHeaderField);
 		border-radius: var(--radius);
 	}
 }
@@ -423,19 +428,12 @@ main {
 		text-align: left;
 
 		&:first-of-type {
-			border-top: 0
+			border-top: 0;
 		}
 
 		&.canProxy {
 			margin-left: 100px;
 		}
-		&.nonGroupedByMethod {
-			margin-left: 118px;
-
-			&.canProxy {
-				margin-left: 146px;
-			}
-		}
 	}
 
 	.TableRow {
@@ -461,7 +459,7 @@ main {
 	min-width: 38px;
 	padding: 4px 0;
 	margin-right: 8px;
-	color: var(--colorSecondaryAction);
+	color: var(--colorLabel);
 	font-size: 11px;
 	text-align: center;
 	white-space: nowrap;
@@ -508,7 +506,7 @@ main {
 		font-size: 11px;
 	}
 	&.status4xx {
-		background: var(--color4xxBackground);
+		background: var(--colorBg4xx);
 	}
 	&:disabled {
 		padding-right: 4px;
@@ -517,7 +515,7 @@ main {
 		appearance: none;
 		background: transparent;
 		cursor: default;
-		color: var(--colorDisabledMockSelector);
+		color: var(--colorLabel);
 		opacity: 0.8;
 	}
 }
@@ -536,7 +534,7 @@ main {
 		&:focus-visible {
 			outline: 0;
 			& + .checkboxBody {
-				outline: 2px solid var(--colorAccent)
+				outline: 2px solid var(--colorAccent);
 			}
 		}
 
@@ -549,7 +547,7 @@ main {
 			border-color: var(--colorAccent);
 			fill: var(--colorAccent);
 			background: var(--colorAccent);
-			stroke: var(--colorBackground);
+			stroke: var(--colorBg);
 		}
 
 		&:enabled:hover:not(:checked) + .checkboxBody {
@@ -567,7 +565,7 @@ main {
 		justify-content: center;
 		border: 1px solid var(--colorBorder);
 		fill: none;
-		stroke: var(--colorSecondaryAction);
+		stroke: var(--colorLabel);
 		stroke-width: 2.5px;
 		border-radius: 50%;
 	}
@@ -614,7 +612,7 @@ main {
 		padding: 4px;
 		font-size: 10px;
 		font-weight: bold;
-		color: var(--colorSecondaryAction);
+		color: var(--colorLabel);
 	}
 }
 
@@ -629,16 +627,28 @@ main {
 		padding-top: 12px;
 		font-family: monospace;
 
+		&:has(> code > :is(iframe, video)) {
+			padding: 0;
+		}
+
 		> code {
 			white-space: pre;
 			tab-size: 2;
-			color: var(--colorSecondaryAction);
+			color: var(--colorLabel);
+
+			> video {
+				width: 100%;
+			}
+			> iframe {
+				width: 100%;
+				height: 100%;
+			}
 		}
 	}
 }
 
 .syntaxPunc {
-	color: var(--colorSecondaryAction);
+	color: var(--colorLabel);
 }
 .syntaxKey,
 .syntaxTag {
@@ -660,7 +670,7 @@ main {
 	left: -16px;
 	width: calc(100% + 32px);
 	height: 2px;
-	background: var(--colorInputBackground);
+	background: var(--colorBgHeaderField);
 
 	> div {
 		position: absolute;

package/src/client/app.js

@@ -1,12 +1,9 @@
-import {
-	createElement as r,
-	t, classNames, restoreFocus, Fragment, defineClassNames
-} from './dom-utils.js'
+import { createElement as r, t, classNames, restoreFocus, Fragment, defineClassNames } from './dom-utils.js'
 
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
 import { Header } from './app-header.js'
-import { TimerIcon, CloudIcon } from './app-icons.js'
+import { TimerIcon, CloudIcon } from './graphics.js'
 import { PayloadViewer, previewMock } from './app-payload-viewer.js'
 
 import CSS from './app.css' with { type: 'css' }
@@ -48,9 +45,7 @@ function Main() {
 				r('div', { className: CSS.SubToolbar },
 					GroupByMethod(),
 					BulkSelector()),
-				r('div', { className: CSS.Table },
-					MockList(),
-					StaticFilesList())),
+				r('div', { className: CSS.Table }, MockList())),
 			r('div', { className: CSS.rightSide },
 				Resizer(leftSideRef),
 				PayloadViewer())))
@@ -82,8 +77,8 @@ function BulkSelector() {
 		r('label', { className: CSS.BulkSelector },
 			r('span', null, t`Bulk Select`),
 			r('select', {
-					autocomplete: 'off',
 					disabled,
+					autocomplete: 'off',
 					title: disabled
 						? t`No mock files have comments which are anything within parentheses on the filename.`
 						: undefined,
@@ -101,14 +96,11 @@ function MockList() {
 		return r('div', null, t`No mocks found`)
 
 	if (store.groupByMethod)
-		return Object.keys(store.brokersByMethod).map(method =>
-			Fragment(
-				r('div', {
-					className: classNames(
-						CSS.TableHeading,
-						store.canProxy && CSS.canProxy)
-				}, method),
-				store.brokersAsRowsByMethod(method).map(Row)))
+		return Object.keys(store.brokersByMethod).map(method => Fragment(
+			r('div', {
+				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
+			}, method),
+			store.brokersAsRowsByMethod(method).map(Row)))
 
 	return store.brokersAsRowsByMethod('*').map(Row)
 }
@@ -122,9 +114,7 @@ function Row(row, i) {
 	return (
 		r('div', {
 				key: row.key,
-				className: classNames(
-					CSS.TableRow,
-					mounted && row.isNew && CSS.animIn)
+				className: classNames(CSS.TableRow, mounted && row.isNew && CSS.animIn)
 			},
 			store.canProxy && ProxyToggler(method, urlMask, row.proxied),
 
@@ -136,12 +126,12 @@ function Row(row, i) {
 			}),
 
 			StatusCodeToggler({
-				title: t`Internal Server Error`,
-				body: t`500`,
-				disabled: row.opts.length === 1 && row.status === 500,
-				checked: !row.proxied && row.status === 500,
+				title: row.isStatic ? t`Not Found` : t`Internal Server Error`,
+				body: row.isStatic ? t`404` : t`500`,
+				disabled: row.opts.length === 1 && (row.isStatic ? row.status === 404 : row.status === 500),
+				checked: !row.proxied && (row.isStatic ? row.status === 404 : row.status === 500),
 				commit() {
-					store.toggle500(method, urlMask)
+					store.toggleStatus(row.isStatic ? 404 : 500, method, urlMask)
 				}
 			}),
 
@@ -201,9 +191,7 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 	const [ditto, tail] = urlMaskDittoed
 	return (
 		r('a', {
-			className: classNames(
-				CSS.PreviewLink,
-				isChosen && CSS.chosen),
+			className: classNames(CSS.PreviewLink, isChosen && CSS.chosen),
 			href: urlMask,
 			autofocus,
 			onClick
@@ -241,76 +229,16 @@ function ProxyToggler(method, urlMask, checked) {
 	return ClickDragToggler({
 		className: CSS.ProxyToggler,
 		title: t`Proxy Toggler`,
+		body: CloudIcon(),
 		checked,
 		commit(checked) {
 			store.setProxied(method, urlMask, checked)
-		},
-		body: CloudIcon()
+		}
 	})
 }
 
 
 
-/** # StaticFilesList */
-
-function StaticFilesList() {
-	const rows = store.staticBrokersAsRows()
-	return !rows.length
-		? null
-		: Fragment(
-			r('div', {
-					className: classNames(CSS.TableHeading,
-						store.canProxy && CSS.canProxy,
-						!store.groupByMethod && CSS.nonGroupedByMethod),
-				},
-				store.groupByMethod
-					? t`Static GET`
-					: t`Static`),
-			rows.map(StaticRow))
-}
-
-/** @param {StaticBrokerRowModel} row */
-function StaticRow(row) {
-	const { groupByMethod } = store
-	const [ditto, tail] = row.urlMaskDittoed
-	return (
-		r('div', {
-				key: row.key,
-				className: classNames(
-					CSS.TableRow,
-					mounted && row.isNew && CSS.animIn)
-			},
-
-			DelayToggler({
-				optClassName: store.canProxy && CSS.canProxy,
-				checked: row.delayed,
-				commit(checked) {
-					store.setDelayedStatic(row.urlMask, checked)
-				}
-			}),
-
-			StatusCodeToggler({
-				title: t`Not Found`,
-				body: t`404`,
-				checked: row.status === 404,
-				commit(checked) {
-					store.setStaticRouteStatus(row.urlMask, checked
-						? 404
-						: 200)
-				}
-			}),
-
-			!groupByMethod && r('span', { className: CSS.Method }, 'GET'),
-
-			r('a', {
-				href: row.urlMask,
-				target: '_blank',
-				className: CSS.PreviewLink,
-			}, ditto
-				? [r('span', { className: CSS.dittoDir }, ditto), tail]
-				: tail)))
-}
-
 function StatusCodeToggler({ title, body, commit, checked, disabled }) {
 	return ClickDragToggler({
 		title,
@@ -322,12 +250,12 @@ function StatusCodeToggler({ title, body, commit, checked, disabled }) {
 	})
 }
 
-function DelayToggler({ checked, commit, optClassName }) {
+function DelayToggler({ checked, commit, className }) {
 	return ClickDragToggler({
-		canClickDrag: true,
 		checked,
 		commit,
-		className: classNames(CSS.DelayToggler, optClassName),
+		className: classNames(CSS.DelayToggler, className),
+		canClickDrag: true,
 		title: t`Delay`,
 		body: TimerIcon()
 	})
@@ -480,7 +408,7 @@ ErrorToast.close = () => {
 /** The version increments when a mock file is added, removed, or renamed. */
 function onRealTimeUpdate(onUpdate) {
 	let oldVersion = -1
-	let es = null
+	let conn = null
 	let timer = null
 
 	connect()
@@ -493,12 +421,12 @@ function onRealTimeUpdate(onUpdate) {
 	window.addEventListener('beforeunload', teardown)
 
 	function connect() {
-		if (es) return
+		if (conn) return
 
 		clearTimeout(timer)
-		es = new EventSource(API.syncVersion)
+		conn = new EventSource(API.syncVersion)
 
-		es.onmessage = function (event) {
+		conn.onmessage = function (event) {
 			if (ErrorToast.isOffline)
 				ErrorToast.close()
 
@@ -509,7 +437,7 @@ function onRealTimeUpdate(onUpdate) {
 			}
 		}
 
-		es.onerror = function () {
+		conn.onerror = function () {
 			teardown()
 			timer = setTimeout(connect, 3000)
 		}
@@ -517,8 +445,8 @@ function onRealTimeUpdate(onUpdate) {
 
 	function teardown() {
 		clearTimeout(timer)
-		es?.close()
-		es = null
+		conn?.close()
+		conn = null
 	}
 }
 

package/src/client/{app-icons.js → graphics.js}

@@ -5,7 +5,7 @@ export function Logo() {
 	return (
 		s('svg', { viewBox: '0 0 556 100' },
 			s('path', { d: 'm13.75 1.8789c-5.9487 0.19352-10.865 4.5652-11.082 11.686v81.445c-1e-7 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-64.982c0.02794-3.4488 3.0988-3.5551 4.2031-1.1562l16.615 59.059c1.4393 5.3711 5.1083 7.9633 8.7656 7.9473 3.6573 0.01603 7.3263-2.5762 8.7656-7.9473l16.615-59.059c1.1043-2.3989 4.1752-2.2925 4.2031 1.1562v64.982c0 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-81.445c-0.17732-7.0807-5.1334-11.492-11.082-11.686-5.9487-0.19352-12.652 3.8309-15.609 13.619l-15.686 57.334-15.686-57.334c-2.9569-9.7882-9.6607-13.813-15.609-13.619zm239.19 0.074219c-2.216 0-4 1.784-4 4v89.057c0 2.216 1.784 4 4 4h4.793c2.216 0 3.9868-1.784 4-4l0.10644-17.94c0.0734-0.07237 12.175-13.75 12.175-13.75 5.6772 11.091 11.404 22.158 17.113 33.232 1.0168 1.9689 3.4217 2.7356 5.3906 1.7188l4.2578-2.1992c1.9689-1.0168 2.7356-3.4217 1.7188-5.3906-6.4691-12.585-12.958-25.16-19.442-37.738l17.223-19.771c1.4555-1.671 1.2803-4.189-0.39062-5.6445l-3.6133-3.1465c-0.73105-0.63679-1.6224-0.96212-2.5176-0.98633-1.151-0.03113-2.3063 0.43508-3.125 1.375l-28.896 33.174v-51.99c0-2.216-1.784-4-4-4zm-58.255 23.316c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312l-0.125-7.8457c0-2.216-1.784-4-4-4h-4.6524c-2.216 0-4 1.784-4 4l3e-3 6.7888c3e-3 3.8063-1.5601 9.3694-8.4716 9.3694h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.6937 0 8.3697 5.2207 8.4687 11.828v2.2207c0 2.216 1.784 4 4 4h4.6524c2.216 0 4-1.784 4-4l0.125-5.7363c0-10.699-8.6117-19.312-19.311-19.312zm-72.182 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' }),
-			s('path', { opacity: 0.7, d: 'm331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z' }),
+			s('path', { opacity: 0.6, d: 'm331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z' }),
 			s('path', { d: 'm392.75 1.373c-2.216 0-4 1.784-4 4v18.043h-5.3086c-2.216 0-4 1.784-4 4v4.793c0 2.216 1.784 4 4 4h5.3086v51.398c0 6.1465 3.7064 10.823 9.232 10.823h16.531c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-12.97v-49.428h9.8711c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-9.8711v-18.043c0-2.216-1.784-4-4-4zm122.96 23.896c-10.699 0-19.312 8.6137-19.312 19.312v49.812c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-45.648c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v45.684c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312zm-69.999 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' })))
 }
 

package/src/client/watcherDev.js

@@ -1,18 +1,18 @@
 import { API } from './ApiConstants.js'
 
 
-let es = null
+let conn = null
 let timer = null
 
 window.addEventListener('beforeunload', teardown)
 connect()
 function connect() {
-	if (es) return
+	if (conn) return
 
 	clearTimeout(timer)
-	es = new EventSource(API.watchHotReload)
+	conn = new EventSource(API.watchHotReload)
 
-	es.onmessage = function (event) {
+	conn.onmessage = function (event) {
 		const file = event.data
 		if (file.endsWith('.css'))
 			hotReloadCSS(file)
@@ -20,7 +20,7 @@ function connect() {
 			location.reload()
 	}
 
-	es.onerror = function () {
+	conn.onerror = function () {
 		console.error('hot reload')
 		teardown()
 		timer = setTimeout(connect, 3000)
@@ -29,8 +29,8 @@ function connect() {
 
 function teardown() {
 	clearTimeout(timer)
-	es?.close()
-	es = null
+	conn?.close()
+	conn = null
 }
 
 async function hotReloadCSS(file) {

package/src/server/Api.js

@@ -20,7 +20,6 @@ import { IndexHtml, CSP } from '../client/IndexHtml.js'
 import { cookie } from './cookie.js'
 import { config, ConfigValidator } from './config.js'
 
-import * as staticCollection from './staticCollection.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
 
 
@@ -51,10 +50,7 @@ export const apiPatchReqs = new Map([
 	[API.delay, setRouteIsDelayed],
 	[API.select, selectMock],
 	[API.proxied, setRouteIsProxied],
-	[API.toggle500, toggleRoute500],
-
-	[API.delayStatic, setStaticRouteIsDelayed],
-	[API.staticStatus, setStaticRouteStatusCode],
+	[API.toggleStatus, toggleRouteStatus],
 
 	[API.watchMocks, setWatchMocks]
 ])
@@ -78,7 +74,6 @@ function getState(_, response) {
 		comments: mockBrokersCollection.extractAllComments(),
 
 		brokersByMethod: mockBrokersCollection.all(),
-		staticBrokers: staticCollection.all(),
 
 		delay: config.delay,
 		delayJitter: config.delayJitter,
@@ -94,7 +89,6 @@ function getState(_, response) {
 
 function reset(_, response) {
 	mockBrokersCollection.init()
-	staticCollection.init()
 	response.ok()
 }
 
@@ -205,14 +199,14 @@ async function selectMock(req, response) {
 }
 
 
-async function toggleRoute500(req, response) {
-	const [method, urlMask] = await req.json()
+async function toggleRouteStatus(req, response) {
+	const [status, method, urlMask] = await req.json()
 
 	const broker = mockBrokersCollection.brokerByRoute(method, urlMask)
 	if (!broker)
 		response.unprocessable(`Route does not exist: ${method} ${urlMask}`)
 	else {
-		broker.toggle500()
+		broker.toggleStatus(status)
 		response.json(broker)
 	}
 }
@@ -251,31 +245,3 @@ async function setRouteIsProxied(req, response) {
 
 
 
-async function setStaticRouteStatusCode(req, response) {
-	const [route, status] = await req.json()
-
-	const broker = staticCollection.brokerByRoute(route)
-	if (!broker)
-		response.unprocessable(`Static route does not exist: ${route}`)
-	else if (!(status === 200 || status === 404))
-		response.unprocessable(`Expected 200 or 404 status code`)
-	else {
-		broker.setStatus(status)
-		response.ok()
-	}
-}
-
-
-async function setStaticRouteIsDelayed(req, response) {
-	const [route, delayed] = await req.json()
-
-	const broker = staticCollection.brokerByRoute(route)
-	if (!broker)
-		response.unprocessable(`Static route does not exist: ${route}`)
-	else if (typeof delayed !== 'boolean')
-		response.unprocessable(`Expected boolean for "delayed"`)
-	else {
-		broker.setDelayed(delayed)
-		response.ok()
-	}
-}