<template>
	<div class="handler-page">
		<h1>Simulare le risposte delle chiamate ad Arca</h1>

		<p>
			Durante la modalità sviluppo(avviata tramite il comando "arca-widget dev"), le chiamate ad Arca
			vengono dirottate ad un handler interno gestibile e configurabile dal codice presente nel file handler.ts dentro la cartella del widget.
		</p>

		<p>
			Il codice che ci interessa è presente nell'oggetto "Routes":
		</p>

		<code-sample lang="javascript" :code="codeSamples.routesInit" />

		<p>
			Ogni elemento dentro Routes è una funzione il quale nome è l'url al quale risponde.
			Nel ritorno non bisogna trasformare gli oggetti in JSON in quanto questo processo avviene automaticamente.
			<br><br>
			Notare che in generale le funzioni non hanno un controllo o una verifica sul tipo di ritorno, a parte Widget/Data.
			Per forzare il controllo del tipo di ritorno su una funzione, basta mettere ':' dopo la lista di parametri e poi specificare il tipo di ritorno.
			<br><br>
			Per esempio Widget/Data forza come tipo di ritorno l'interfaccia WidgetDataFormat specificata in data.ts.
		</p>

		<hr class="section-separator">
		<h2>Intercettare le widget Action/PostAction</h2>

		<p>
			Per intercettare le chiamate alle widget action, basta creare funzioni con il nome "Widget/Action/NomeAzione" oppure "Widget/PostAction/NomeAzione" (nel caso di PostAction).
			<br><br>
			Esempio: Se il mio widget usa due action chiamate "AvviaFormA" e "AvviaFormB" e una post action chiamata "Invia", allora aggiungo 3 funzioni:
		</p>

		<code-sample lang="javascript" :code="codeSamples.actionDef" />

		<hr class="section-separator">
		<h2>Ricevere parametri e payload post delle chiamate nelle funzioni dell'handler</h2>

		<p>
			A tutte le funzioni viene passato nel primo parametro un oggetto che contiene i parametri della chiamata, se ci sono.
			<br>
			Nel secondo parametro viene passato il payload post.
		</p>

		<code-sample lang="javascript" :code="codeSamples.actionParam" />
	</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component
export default class HandlerPage extends Vue
{
	codeSamples = {
		routesInit: [
			`const Routes =`,
			`{`,
			`	"MainUI/Action/Generale/GetColor"()`,
			`	{`,
			`		return { rgbcolor: "#CC0000".cssHexStringToColor() }`,
			`	},`,
			`	"Widget/Data"(): IWidgetDataFormat`,
			`	{`,
			`		return {`,
			`			rows: []`,
			`		}`,
			`	}`,
			`}`,
		].join('\n'),

		actionDef: [
			`"Widget/Action/AvviaFormA"()`,
			`{`,
			`	// Codice per simulare l'azione AvviaFormA`,
			`},`,
			``,
			`"Widget/Action/AvviaFormB"()`,
			`{`,
			`	// Codice per simulare l'azione AvviaFormB`,
			`},`,
			``,
			`"Widget/PostAction/Invia"()`,
			`{`,
			`	// Codice per simulare l'azione post Invia`,
			`},`
		].join('\n'),

		actionParam: [
			`// Esempio: Widget/Data?param1=10&param2=abc`,
			`"Widget/Data"(params)`,
			`{`,
			`	params.param1 === 10; // true`,
			`	params.param2 === "abc"; // true`,
			`}`
		].join('\n')
	}
}
</script>

<style lang="less" scoped>
.handler-page {
	
}
</style>