sylvaindesve/index.html

## index.html
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sauvegarde Reactive</title>
  </head>
  <body>
    <h1>Sauvegarde Reactive</h1>
    <p>Types d'accidents</p>
    <input id="typesAccidents" type="text" />
    <p>Bloc-note</p>
    <textarea id="blocNotes" name="blocNotes" rows="8" cols="80"></textarea>
    <br />
    <ul id="saveLog" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js" integrity="sha256-Nihli32xEO2dsnrW29M+krVxoeDblkRBTkk5ZLQJ6O8=" crossorigin="anonymous"></script>
    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

## index.js
let fromEvent = rxjs.fromEvent;
let timer = rxjs.timer;
let of = rxjs.of;
let merge = rxjs.merge;

let filter = rxjs.operators.filter;
let switchMap = rxjs.operators.switchMap;
let map = rxjs.operators.map;
let throttleTime = rxjs.operators.throttleTime;

// Elements HTML
let saveLog = document.getElementById("saveLog");
let blocNotes = document.getElementById("blocNotes");
let typesAccidents = document.getElementById("typesAccidents");

// TYPES D'ACCIDENTS
// =================

// Chaque fois que les types d'accidents sont modifiés
// C'est un peu violent mais c'est pour la démo et pour montrer
// la gestion de concurrence entre ce champ et le bloc-notes
let typesAccidentsInputStream = fromEvent(typesAccidents, 'input');

// BLOC-NOTES
// ==========

// Chaque fois que l'utilisateur modifie le bloc-notes
let blocNotesInputStream = fromEvent(blocNotes, "input");

// On différencie l'insertion de nouvelle ligne
let blocNotesTextOrNewLineStream = blocNotesInputStream.pipe(
  map((inputEvent) => {
    if (inputEvent.inputType === "insertLineBreak") {
      return "newLine";
    } else {
      return "text";
    }
  })
);

// Emet sur une nouvelle ligne ou bien au bout de 5 secondes sans écrire de texte
let blocNotesEnterOrFiveSeconds = blocNotesTextOrNewLineStream.pipe(
  switchMap((eventType) => {
    if (eventType == "text") {
      return timer(5000);
    } else {
      return of(1);
    }
  })
);

// MEDIATEUR
// =========

// Le médiateur prend toutes les demandes de sauvegarde et s'assure qu'on en
// n'envoie pas plus de 1 toutes les 3 secondes
let mediateurStream = merge(
  typesAccidentsInputStream, // Tout changement des types d'accidents
  blocNotesEnterOrFiveSeconds // Nouvelle ligne ou 5 secondes d'inactivité pour le bloc-notes
).pipe(
  throttleTime(3000)
  // Ici on pourrait facilement ajouter un delay(1000) pour attendre 1 seconde que l'édition soit bien finie avant d'envoyer
);

mediateurStream.subscribe(() => {
  // Ici, envoyer la demande de sauvegarde au worker

  // Pour la démo, on affiche dans la page
  let newLi = document.createElement("li");
  let newLiContent = document.createTextNode("Sauvegarde !");
  newLi.appendChild(newLiContent);
  saveLog.appendChild(newLi);
});
	<!DOCTYPE html>
	<html lang="fr" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Sauvegarde Reactive</title>
	</head>
	<body>
	<h1>Sauvegarde Reactive</h1>
	<p>Types d'accidents</p>
	<input id="typesAccidents" type="text" />
	<p>Bloc-note</p>
	<textarea id="blocNotes" name="blocNotes" rows="8" cols="80"></textarea>
	<br />
	<ul id="saveLog" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js" integrity="sha256-Nihli32xEO2dsnrW29M+krVxoeDblkRBTkk5ZLQJ6O8=" crossorigin="anonymous"></script>
	<script src="index.js" charset="utf-8"></script>
	</body>
	</html>
	let fromEvent = rxjs.fromEvent;
	let timer = rxjs.timer;
	let of = rxjs.of;
	let merge = rxjs.merge;

	let filter = rxjs.operators.filter;
	let switchMap = rxjs.operators.switchMap;
	let map = rxjs.operators.map;
	let throttleTime = rxjs.operators.throttleTime;

	// Elements HTML
	let saveLog = document.getElementById("saveLog");
	let blocNotes = document.getElementById("blocNotes");
	let typesAccidents = document.getElementById("typesAccidents");

	// TYPES D'ACCIDENTS
	// =================

	// Chaque fois que les types d'accidents sont modifiés
	// C'est un peu violent mais c'est pour la démo et pour montrer
	// la gestion de concurrence entre ce champ et le bloc-notes
	let typesAccidentsInputStream = fromEvent(typesAccidents, 'input');

	// BLOC-NOTES
	// ==========

	// Chaque fois que l'utilisateur modifie le bloc-notes
	let blocNotesInputStream = fromEvent(blocNotes, "input");

	// On différencie l'insertion de nouvelle ligne
	let blocNotesTextOrNewLineStream = blocNotesInputStream.pipe(
	map((inputEvent) => {
	if (inputEvent.inputType === "insertLineBreak") {
	return "newLine";
	} else {
	return "text";
	}
	})
	);

	// Emet sur une nouvelle ligne ou bien au bout de 5 secondes sans écrire de texte
	let blocNotesEnterOrFiveSeconds = blocNotesTextOrNewLineStream.pipe(
	switchMap((eventType) => {
	if (eventType == "text") {
	return timer(5000);
	} else {
	return of(1);
	}
	})
	);

	// MEDIATEUR
	// =========

	// Le médiateur prend toutes les demandes de sauvegarde et s'assure qu'on en
	// n'envoie pas plus de 1 toutes les 3 secondes
	let mediateurStream = merge(
	typesAccidentsInputStream, // Tout changement des types d'accidents
	blocNotesEnterOrFiveSeconds // Nouvelle ligne ou 5 secondes d'inactivité pour le bloc-notes
	).pipe(
	throttleTime(3000)
	// Ici on pourrait facilement ajouter un delay(1000) pour attendre 1 seconde que l'édition soit bien finie avant d'envoyer
	);

	mediateurStream.subscribe(() => {
	// Ici, envoyer la demande de sauvegarde au worker

	// Pour la démo, on affiche dans la page
	let newLi = document.createElement("li");
	let newLiContent = document.createTextNode("Sauvegarde !");
	newLi.appendChild(newLiContent);
	saveLog.appendChild(newLi);
	});