feat: Add CalcDB to the tools

see #143

app/routes/tools.py

@@ -6,3 +6,7 @@ from app.utils.render import render
 @app.route('/outils')
 def tools():
     return render('tools.html')
+
+@app.route('/outils/comparateur')
+def calc_comparator():
+    return render('calcdb.html', scripts=['+scripts/calcdb_info.js'], styles=['+css/calcdb.css'])

app/static/css/calcdb.css

@@ -0,0 +1,17 @@
+/* Controlling checkboxes */
+
+#calcdb-checkboxes {
+  display: grid;
+  grid: repeat(5,auto) / repeat(5, 1fr);
+  grid-auto-flow: column;
+}
+#calcdb-checkboxes div {
+  display: block;
+}
+#calcdb-checkboxes div > input {
+  margin: 0 0 4px 0;
+  vertical-align: top;
+}
+#calcdb-checkboxes div > span {
+  vertical-align: middle;
+}

app/static/scripts/calcdb_info.js

@@ -0,0 +1,709 @@
+/* Currently-active calculators */
+const default_set = [ "g25+e2", "g35+e2", "g90+e", "cp400+e" ];
+
+/* Hide or show a calculator, by controlling checkbox */
+function toggle_calc(checkbox) {
+  const selector = "#calcdb .calc-" + checkbox.dataset.calc;
+  document.querySelectorAll(selector).forEach(td => {
+    if(checkbox.checked)
+      td.style.display = "table-cell";
+    else
+      td.style.display = "none";
+  });
+  update_permalink();
+}
+
+/* Select a fixed set set */
+function select_set(set) {
+  document.querySelectorAll("#calcdb-checkboxes input").forEach(box => {
+    box.checked = set.includes(box.dataset.name) || set.includes(box.dataset.calc);
+    box.dispatchEvent(new Event("change"));
+  });
+  update_permalink();
+}
+/* Select all calculators */
+function select_all() {
+  document.querySelectorAll("#calcdb-checkboxes input").forEach(box => {
+    box.checked = true;
+    box.dispatchEvent(new Event("change"));
+  });
+  update_permalink();
+}
+
+/* Udpate permalink and page URL*/
+function update_permalink() {
+  var search = [];
+  document.querySelectorAll("#calcdb-checkboxes input").forEach(box => {
+    if(box.checked) search.push(box.dataset.name);
+  });
+
+  var loc = window.location.href.split("?")[0] + "?" + search.join(",");
+  history.pushState({}, "Comparateur Planète Casio", loc);
+  document.getElementById("calcdb-permalink").href = loc;
+}
+
+/* The browser might load the page with some boxes pre-checked because of
+   forms being cached, so upate to make sure the display is consistent */
+document.addEventListener('DOMContentLoaded', function() {
+  const query = window.location.search;
+  document.querySelectorAll("#calcdb-checkboxes input").forEach(toggle_calc);
+
+  /* Also read the query string for a potential fixed set */
+  if(!query) return;
+  var set = [];
+  query.substr(1).split(",").forEach(name => {
+    if(name == "current") set = set.concat(default_set);
+    else set.push(name);
+  });
+  select_set(set);
+}, false);
+
+var x = 0;
+var y = 0;
+
+selectbl = new Array;
+selectbl[0] = "sel";
+selectbl[1] = "sel1";
+selectbl[2] = "sel2";
+selectbl[3] = "sel3";
+selectbl[4] = "sel4";
+selectbl[5] = "sel5";
+selectbl[6] = "sel6";
+selectbl[7] = "selform1";
+selectbl[8] = "selform2";
+selectbl[9] = "selform3";
+
+document.onmousemove = position;
+
+function hideselects(){
+    for(i=0;i<selectbl.length;i++){
+      if(document.getElementById(selectbl[i])){
+    document.getElementById(selectbl[i]).style.visibility = 'hidden';
+    }
+    }
+}
+
+function showselects(){
+    for(i=0;i<selectbl.length;i++){
+      if(document.getElementById(selectbl[i])){
+    document.getElementById(selectbl[i]).style.visibility = 'visible';
+    }
+    }
+}
+
+
+function position(e)
+{
+	x = e.pageX
+	y = e.pageY
+}
+
+function showinfos(txt)
+{
+	hideselects();
+	position;
+
+	info = document.getElementById('infobulle').style;
+
+	txt	= '<table class=\"infobulle\"><tr><td class=\"infobulletitle\">Aide :</td></tr><tr><td class=\"infobulle\">'+txt+'</td></tr></table>';
+	document.getElementById('infobulle').innerHTML = txt;
+
+	info.top = (y+10)+"px";
+	info.left = (x+10)+"px";
+	if(screen.availWidth <= 1024 && x > 850)
+		info.left = x-80;
+
+	info.visibility = 'visible';
+}
+
+
+function hideinfos()
+{
+	document.getElementById('infobulle').style.visibility = 'hidden';
+	showselects();
+}
+
+function openimg(name,url)
+{
+	linkimg = window.open(url,name,'resizable=yes,toolbar=no,scrollbar=no,width=50,height=50,top=0,left=0');
+}
+
+function toggleSpoiler(spoiler, action) {
+    var elements = spoiler.getElementsByTagName('div');
+
+    switch(action) {
+        case 'open':
+            elements[0].className = 'title off';
+            elements[1].className = 'title on';
+            elements[2].className = 'on';
+            break;
+
+        case 'close':
+            elements[0].className = 'title on';
+            elements[1].className = 'title off';
+            elements[2].className = 'off';
+            break;
+    }
+}
+
+$(function() {
+
+
+	//Ajout d'un lien sur les images qui sont reduites par min-width
+		var virtualImg = new Image();
+		$(".news img, .topic img").one('load', function()
+		{
+			virtualImg.src = $(this).attr('src')
+
+
+
+			if($(this).attr('resized')!="true" && $(this).parent().get(0).tagName !="A" && virtualImg.width > $(this).css('max-width').slice(0,-2))
+				$(this).wrap('<a href="'+ $(this).attr('src') +'"></a>');
+		}).each(function() {
+		  if(this.complete) $(this).load();
+		});
+
+	//formulaire de notation des programmes
+		//vars
+			var noteSelectionnee = -1
+			var LiensNote = $('.PrgmNote').find('div.boutonsNote').children('a')
+
+		//events
+			LiensNote.click(function() {
+				noteSelectionneUpdate($(this).parent().parent(), $(this).attr('note'), true)
+				return false;
+			})
+			LiensNote.mouseover(function() {
+				noteSelectionneUpdate($(this).parent().parent(), $(this).attr('note'))
+			})
+			LiensNote.mouseout(function() {
+				noteSelectionneUpdate($(this).parent().parent())
+			})
+			$('.PrgmNote').children("a.retourNote").click(function() {
+
+
+
+				if($('.PrgmNote').children("div").css('display') == 'block')
+					$('.PrgmNote').children("div").css('display','none');
+				else
+					$('.PrgmNote').children("div").css('display','block');
+
+				return false;
+			})
+		//fonctions
+			noteSelectionneUpdate = function(PrgmNoteDiv, note, clique)
+			{
+				if(note >= 0)
+				{
+					PrgmNoteDiv.find(".note").html(note + '/10')
+					if(clique){
+						PrgmNoteDiv.find(".note").css('font-weight','bold')
+						PrgmNoteDiv.find(".note").css('font-style','normal')
+						noteSelectionnee = note
+						PrgmNoteDiv.find("select").children('option[selected=selected]').removeAttr('selected')
+						PrgmNoteDiv.find("select").children('option[value=' + note + ']').attr('selected','selected')
+					}
+					else
+					{
+						PrgmNoteDiv.find(".note").css('font-style','italic')
+						PrgmNoteDiv.find(".note").css('font-weight','normal')
+					}
+				}
+				else
+				{
+					if(noteSelectionnee < 0)
+					{
+						PrgmNoteDiv.find(".note").html('')
+					}
+					else
+					{
+						PrgmNoteDiv.find(".note").css('font-weight','bold')
+						PrgmNoteDiv.find(".note").css('font-style','normal')
+						PrgmNoteDiv.find(".note").html(noteSelectionnee + '/10')
+					}
+				}
+			}
+		//init
+			$('.PrgmNote').find("select").css('display','none')
+			$('.PrgmNote').find(".boutonsNote").css('display','block')
+			$('.PrgmNote').children("div").css('display','none')
+			noteSelectionneUpdate($('.PrgmNote'), $('.PrgmNote').find("option[selected]").attr('value'), true)
+
+	//addthis retardateur
+		var isTimeFinish = false
+		var isOut = true;
+		function timeFinish(that)
+		{
+			isTimeFinish = true
+			that.mouseover()
+		}
+
+		$('.addthis_button').children('img').mouseenter(function() {
+			if(isTimeFinish)
+			{
+				clearTimeout(timeoutID);
+				return true;
+			}
+			else
+			{
+				timeoutID = setTimeout(function(that){timeFinish(that);}, 200, $(this));
+				return false;
+			}
+		})
+		$('.addthis_button').children('img').mouseleave(function() {
+			isTimeFinish = false;
+			clearTimeout(timeoutID);
+			return true;
+		})
+	//antibot JS pour invité
+		$(document).ready(function(){
+			$('.messageForm').css('display','block');
+			$('.messageForm').children('form').append('<input type="hidden" name="jsActive" value="Oui"/>');
+		})
+	//Editeur - namespace:ed
+		//vars
+			var ed_boutons = $('.editeur').find('.boutons').find('img,td,span');
+			var ed_textarea = $('.editeur').find('textarea');
+			var ed_pins = $('.editeur').find('.pinhidden,.pinshow');
+			var ed_cross = $('.editeur').find('.cross');
+			var ed_inputs = $('.editeur').find('.AskBoxInputText');
+			var ed_smileys = $('.editeur').find('.ABsmiley').find('td');
+			//speciale IE
+			$(".editeur").data('isfocused',false);
+			$(".editeur").data('selecStart',0);
+			$(".editeur").data('selecEnd',0);
+			$(".editeur").data('isPinned',false);
+			$(".editeur").data('tag','');
+		//events
+			$('.editeur').find('.AskBoxBottom').children('img').click(function(){
+				ed_addtag($(this).closest(".editeur"));
+			});
+			$('.editeur').find('.ABprofil').click(function(){
+				var formname = $(this).closest('.editeur').data('formname');
+				fenetre=window.open('/Fr/compte/liste_des_membres.php?id=ed_'+formname+'_lienMembre','fenetre','resizable=yes,toolbar=no,scrollbars=yes,width=280,height=450,top=0,left=0')
+			});
+
+			ed_cross.click(function()//fermeture de toutes les askbox si on clique ailleur
+			{
+				close_AskBox($(this).closest(".editeur"),false);
+			});
+
+			$('.editeur').find('.edSelect').change(function(){
+
+				var tag = $(this).children('option:checked').val();
+				if(tag.length > 0)
+					add_text($(this).closest('.editeur').find('textarea'),'['+tag+']', '[/'+tag+']', '')
+				$(this).children('option').removeAttr('selected');
+				$(this).children('option[value=]').attr('selected','selected');
+			});
+
+			ed_pins.click(function(){
+				var editeur = $(this).closest(".editeur");
+				if(editeur.data('isPinned')==false)
+				{
+					editeur.data('isPinned',true);
+					$(this).css('display','none');
+					$(this).parent().children('.pinshow').css('display','block');
+				}
+				else
+				{
+					editeur.data('isPinned',false);
+					$(this).css('display','none');
+					$(this).parent().children('.pinhidden').css('display','block');
+				}
+			});
+
+
+			ed_boutons.click(function(){
+				if($(this).data('type')=='text')
+				{
+					add_text($(this).closest(".editeur").find('textarea'), $(this).data('avant'),$(this).data('apres'),$(this).data('valeur'));
+				}
+				else if($(this).data('type')=='askbox')
+				{
+					show_AskBox($(this).closest(".editeur"), $(this).data('name'))
+				}
+			});
+
+			ed_smileys.click(function(){
+				if($(this).data('type')=='text')
+				{
+					add_text($(this).closest(".editeur").find('textarea'), $(this).data('avant'),$(this).data('apres'),$(this).data('valeur'));
+				}
+				else if($(this).data('type')=='askbox')
+				{
+					show_AskBox($(this).closest(".editeur"), $(this).data('name'))
+				}
+				close_AskBox($(this).closest(".editeur"));
+			});
+
+			ed_inputs.keypress(function(e) {
+				if(e.which == 13) {
+					ed_addtag($(this).closest(".editeur"));
+					return false;
+				}
+			});
+
+			ed_textarea.focus(function(){
+				$(this).closest(".editeur").data('isfocused',true);
+			});
+			ed_textarea.blur(function(){
+				$(this).closest(".editeur").data('isfocused',false);
+			});
+		//Askbox fonctions
+			//affiche une askbox
+				function show_AskBox(editeur, AskBoxName)
+				{
+					close_AskBox(editeur, false,false);
+					var AskBox = editeur.children('.AskBox');
+					var actualAskBox = 	AskBox.children('.AskBoxText.AB'+AskBoxName);
+					var textarea = editeur.find('textarea')[0];
+					var title = "";
+					editeur.data('tag',AskBoxName);
+					//Get selected text
+						var selectedText = '';
+						if(typeof document.selection != 'undefined')//IE support
+						{
+							var range = document.selection.createRange();
+							selectedText=range.text;
+						}
+						else if(typeof textarea.selectionStart != 'undefined')//Firefox, GC support
+						{
+							selectedText=textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
+						}
+					//Open the askbox
+					switch(AskBoxName)
+					{
+						case 'url' :
+							var title = "Ajouter un lien";
+							var focusOn = null;
+							if(selectedText.substring(0,7)=="http://" || selectedText.substring(0,8)=="https://" || selectedText.substring(0,6)=="ftp://")
+							{
+								actualAskBox.find('.AskBoxInputText[name=ed-urlLien]').val(selectedText);
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-urlNom]');
+							}
+							else
+							{
+								actualAskBox.find('.AskBoxInputText[name=ed-urlNom]').val(selectedText);
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-urlLien]').val("http://");
+							}
+							break;
+						case 'img' :
+							title = "Ajouter une image";
+							actualAskBox.find('.AskBoxInputRadio[name=ed-imgType][value=img]').prop('checked', true);
+							actualAskBox.find('.AskBoxInputRadio[name=ed-imgAlign][value=center]').prop('checked', true);
+							if(selectedText.substring(0,7)=="http://" || selectedText.substring(0,8)=="https://" || selectedText.substring(0,6)=="ftp://")
+							{
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-imgAdresse]').val(selectedText);
+							}
+							else
+							{
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-imgAdresse]').val("http://");
+							}
+							break;
+						case 'video' :
+							title = "Ajouter une vidéo";
+							actualAskBox.find('.AskBoxInputRadio[name=ed-videoType][value=video]').prop('checked', true);
+							if(selectedText.substring(0,7)=="http://" || selectedText.substring(0,8)=="https://")
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-videoAdresse]').val(selectedText);
+							else
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-videoAdresse]').val("http://");
+							break;
+						case 'profil' :
+								title = "Ajouter un lien vers un profil";
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-profilPseudo]').val(selectedText);
+							break;
+						case 'quote' :
+							title = "Citer";
+								focusOn = actualAskBox.find('.AskBoxInputText[name=ed-quoteAuteur]');
+							break;
+						case 'spoiler' :
+							title = "Ajouter un spoiler";
+							focusOn = actualAskBox.find('.AskBoxInputText[name=ed-spoilerOpen]');
+							break;
+						case 'progress' :
+							title = "Ajouter une barre de progression";
+							focusOn = actualAskBox.find('.AskBoxInputText[name=ed-progressTitle]').val(selectedText);
+							break;
+						case 'smiley' :
+							title = "Plus de smileys !";
+							AskBox.children('.AskBoxBottom').css('display','none');
+							break;
+					}
+					AskBox.children('.AskBoxTop').children('span').html(title);
+					// AskBox.css('display','block');
+					editeur.children('.AskBox').show('fast');
+					actualAskBox.css('display','block');
+					if(focusOn!=null)focusOn.focus();
+				}
+			// masque tous les askbox(en verifiant s'ils sont pinned si verif=true)
+				function close_AskBox(editeur, verif, anim)
+				{	if(anim != false)anim = true;
+					if(editeur.data('isPinned')==false || verif==false)
+					{
+						editeur.children('.AskBox').children('.AskBoxBottom').css('display','block');
+						if(anim)
+							editeur.children('.AskBox').hide('fast');
+						else
+							editeur.children('.AskBox').css('display','non');
+
+						editeur.children('.AskBox').children('.AskBoxText').css('display','none');
+						editeur.data('tag','');
+						editeur.data('isPinned',false);
+						editeur.find('.pinshow').css('display','none');
+						editeur.find('.pinhidden').css('display','block');
+					}
+				}
+			//Validation des askbox
+			function ed_addtag(editeur)
+			{
+				var tag = editeur.data('tag');
+				var valeur='';
+				var valeurSup='';
+				// var selectionVide=true;
+				var cursorAtEnd=false;
+
+				switch(tag)
+				{
+					case 'url':
+						valeur=editeur.find('.AskBoxInputText[name=ed-urlNom]').val();
+						valeurSup=editeur.find('.AskBoxInputText[name=ed-urlLien]').val();
+						if(valeur==""){valeur=valeurSup;cursorAtEnd=false;}else cursorAtEnd=true;
+						valeurSup="="+valeurSup;
+						break;
+					case 'img' :
+						//adimg
+							if(editeur.find('.AskBoxInputRadio[name=ed-imgType]:checked').val() == "adimg")
+								tag = "adimg";
+						//get value
+							valeur=editeur.find('.AskBoxInputText[name=ed-imgAdresse]').val();
+						//prepare valeurSup
+							valeurSup = "=";
+							var premierArg= true;
+							var largeur = parseInt(editeur.find('.AskBoxInputText[name=ed-imgWidth]').val());
+							if(largeur > 0)//if int
+							{
+								valeurSup += largeur;
+								premierArg = false;
+							}
+							var hauteur = parseInt(editeur.find('.AskBoxInputText[name=ed-imgHeight]').val());
+							if(hauteur > 0)//if int
+							{
+								valeurSup += "x" + hauteur;
+								premierArg = false;
+							}
+							var align = editeur.find('.AskBoxInputRadio[name=ed-imgAlign]:checked').val()
+							if(align.length >0)
+							{
+								if(premierArg==false){valeurSup += "|"}
+								valeurSup += align;
+								premierArg = false;
+							}
+							if(premierArg){valeurSup = ""}
+						cursorAtEnd=true;
+						break;
+					 case 'video' :
+						valeur=editeur.find('.AskBoxInputText[name=ed-videoAdresse]').val();
+						if(editeur.find('.AskBoxInputRadio[name=ed-videoType]:checked').val() == "video tiny")
+							tag = "video mini";
+						cursorAtEnd=true;
+						break;
+					case 'profil' :
+							valeur = editeur.find('.AskBoxInputText[name=ed-profilPseudo]').val();
+							if(valeur.length > 0) cursorAtEnd=true;
+						break;
+					case 'quote' :
+							valeurSup = editeur.find('.AskBoxInputText[name=ed-quoteAuteur]').val();
+							if(valeurSup!="")valeurSup="="+valeurSup;
+						break;
+					case 'spoiler':
+						valeurSup = "=" + editeur.find('.AskBoxInputText[name=ed-spoilerOpen]').val() + "|" + editeur.find('.AskBoxInputText[name=ed-spoilerClose]').val();
+						if(valeurSup == '=Cliquer pour dérouler|Cliquer pour enrouler')
+							valeurSup = "";
+						break;
+					case 'progress':
+						valeur= editeur.find('.AskBoxInputText[name=ed-progressTitle]').val();
+						if(valeur.length <=0)
+						{
+							alert('Le titre de la barre de progression est obligatoire.');
+							editeur.find('.AskBoxInputText[name=ed-progressTitle]').focus();
+							return;
+						}
+						valeurSup= parseInt(editeur.find('.AskBoxInputText[name=ed-progressPourcent]').val());
+						if(!valeurSup>=1 && !valeurSup<=100)
+						{
+							alert('Le pourcentage de la barre de progression est obligatoire et doit être compris entre 1 et 100');
+							editeur.find('.AskBoxInputText[name=ed-progressPourcent]').focus();
+							return;
+						}
+						valeurSup="="+valeurSup;
+						cursorAtEnd=true;
+					break;
+				}
+				//fermeture des askbox
+					close_AskBox(editeur);
+				//Envoi sur le textarea
+					if(cursorAtEnd){add_text(editeur.find('textarea'), '[' + tag + valeurSup + ']'+ valeur +'[/' + tag + ']')}
+					else{add_text(editeur.find('textarea'), '[' + tag + valeurSup + ']','[/' + tag + ']',valeur)}
+			}
+		//IE compatibility
+			document.onmouseup = updateIECursorPosition;
+			document.onkeydown = updateIECursorPosition;
+			function updateIECursorPosition()//IE - detection de la position du curseur pour IE qu'il l'oublie quand on clique autrepart que sur le textarea..
+			{
+				$('.editeur').each(function(){
+					var thisTxtarea = $(this).find('textarea');
+					if($(this).data('isfocused') && typeof(thisTxtarea[0].createTextRange) == 'function')
+					{
+						var range = thisTxtarea[0].createTextRange();
+						range.moveToBookmark(document.selection.createRange().getBookmark());
+						range.moveEnd('character', thisTxtarea[0].value.length);
+						$(".editeur").data('selecStart',(thisTxtarea[0].value.length - range.text.length))
+
+						var range = thisTxtarea[0].createTextRange();
+						range.moveToBookmark(document.selection.createRange().getBookmark());
+						range.moveStart('character', - thisTxtarea[0].value.length);
+						$(".editeur").data('selecEnd',range.text.length);
+					}
+				});
+			}
+
+	//general textarea functions
+		function add_text(textarea, before, after, valeur)
+		{
+			selecStart = textarea.data('selecStart');
+			selecEnd = textarea.data('selecEnd');
+			if(before==null){before='';}
+			if(after==null){after='';}
+			if(valeur==null){valeur='';}
+			if(typeof document.selection != 'undefined')//IE support
+			{
+				var insText;
+				textarea.focus();
+				if(selecStart!=null && selecEnd!=null)
+				{	var range = document.selection.createRange();
+					if (textarea[0].setSelectionRange)
+						textarea[0].setSelectionRange(selecStart, selecEnd);
+					else if (document.selection) {
+						var range = textarea[0].createTextRange();
+						range.moveStart('character', selecStart);
+						range.moveEnd('character', - textarea[0].value.length + selecEnd);
+						range.select();
+					}
+				}
+
+				textarea.focus();
+				range = document.selection.createRange();
+				if(valeur!=''){insText=valeur;}else{insText = range.text;}
+				if(after=='' && valeur=='')
+				{
+					range.text = before;
+					range.select();
+				}
+				else
+				{
+					range.text = before + insText + after ;
+					range.moveStart('character', -after.length -insText.length);
+					range.moveEnd('character', -after.length);
+					range.select();
+				}
+
+			}
+			else if(typeof textarea[0].selectionStart != 'undefined')//Firefox, GC support
+			{
+				var start = textarea[0].selectionStart;
+				var end = textarea[0].selectionEnd;
+				var insText;
+				if(valeur!='')
+					insText=valeur;
+				else
+					insText = textarea.val().substring(start, end);
+
+				if(after=='' && valeur=='')
+				{
+					textarea.val(textarea.val().substr(0, start) + before + textarea.val().substr(end));
+					textarea[0].selectionStart = start + before.length;
+					textarea[0].selectionEnd = start + before.length;
+				}
+				else
+				{
+					textarea.val(textarea.val().substr(0, start) + before + insText + after + textarea.val().substr(end));
+					textarea[0].selectionStart = start + before.length;
+					textarea[0].selectionEnd = start + before.length + insText.length;
+				}
+
+				textarea.focus();
+			}
+			else
+			{
+				textarea.val(before + valeur + after);
+				textarea.focus();
+			}
+        }
+
+    // Preview button on textarea
+        $('.pctextarea_preview').on('shown.bs.modal', function () {
+            const message = $(this).parent().find('.editeurTextareaDiv > textarea').val();
+            const body = $(this).find('.modal-body');
+            $.post('/Fr/forums/preview.php', {message}, function(data, status) {
+                body.html(data.preview);
+            })
+            .fail(function() {
+                body.html('<p class="align-center">Erreur pendant la récupération de la prévisualisation.</p>');
+            });
+        })
+
+	//fonction citer dans le forum
+		$('.lien_citation').click(function(){
+			var auteur = $(this).data('membre');
+			var id_message = $(this).data('id');
+			var textarea = $('textarea[name=message]');
+			$.ajax({type: "POST",
+				url: '/Fr/forums/quote.php',
+				data: {id : id_message}
+				}).done(function( msg )
+				{
+					add_text(textarea,'[quote=' + auteur + ']' + msg + '[/quote]','','');
+				});
+        });
+
+	//bouton d'affichage des stats
+		$('#stats').click(function(){
+			window.open($(this).attr('href'),'connectes','resizable=yes,toolbar=no,scrollbars=yes,width=550,height=300,top=0,left=0')
+			return false;
+		});
+	//Lien de control de la fenetre principale depuis un popoup
+		$('.popuplink').click(function(){
+			window.opener.location.href=$(this).data('link');return false;
+			return false;
+        });
+
+
+    /**
+     * Confirmation modal
+     *
+     * Add the 'need-confirm' class to a link to show a prompt asking for confirmation.
+     * 'data-confirm-text' attribute can be used to customize the confirm message
+     */
+    $('a.need-confirm').click(function(){
+        const modal = $('#confirm-modal');
+
+        // Get text from 'data-confirm-text' arg
+        let text = 'Êtes-vous sûr de vouloir continuer ?';
+        console.log($(this).data())
+        if ($(this).data('confirm-text')) {
+            text = $(this).data('confirm-text');
+        }
+        modal.find('.confirm-modal-text').first().html(text)
+
+        // Set "Yes" link to original href of $(this)
+        modal.find('.confirm-modal-yes').first().attr('href', $(this).attr('href'))
+
+        // Configure and open modal
+        $('#confirm-modal').modal('show');
+
+        return false;
+    });
+});
+
+

app/templates/base/navbar/tools.html

@@ -20,4 +20,9 @@
 			<path fill="#ffffff" d="M19,8L15,12H18A6,6 0 0,1 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20A8,8 0 0,0 20,12H23M6,12A6,6 0 0,1 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4A8,8 0 0,0 4,12H1L5,16L9,12"></path>
 		</svg>SH4 Compatibility Tool
 	</a>
+	<a href="{{ url_for('calc_comparator') }}">
+		<svg viewBox="0 0 24 24" fill="none">
+			<path d="M5 9H19M15 18V15M9 18H9.01M12 18H12.01M12 15H12.01M9 15H9.01M15 12H15.01M12 12H12.01M9 12H9.01M8.2 21H15.8C16.9201 21 17.4802 21 17.908 20.782C18.2843 20.5903 18.5903 20.2843 18.782 19.908C19 19.4802 19 18.9201 19 17.8V6.2C19 5.0799 19 4.51984 18.782 4.09202C18.5903 3.71569 18.2843 3.40973 17.908 3.21799C17.4802 3 16.9201 3 15.8 3H8.2C7.0799 3 6.51984 3 6.09202 3.21799C5.71569 3.40973 5.40973 3.71569 5.21799 4.09202C5 4.51984 5 5.07989 5 6.2V17.8C5 18.9201 5 19.4802 5.21799 19.908C5.40973 20.2843 5.71569 20.5903 6.09202 20.782C6.51984 21 7.07989 21 8.2 21Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+		</svg>Comparateur de calculatrices
+	</a>
 </div>

app/templates/calcdb-fr.html

@@ -0,0 +1 @@
+../../extra/calcdb/calcdb-fr.html

app/templates/calcdb.html

@@ -0,0 +1,143 @@
+{% extends "base/base.html" %}
+
+{% set tabtitle = "Outils" %}
+
+{% block title %}
+<h1>Outils</h1>
+{% endblock %}
+
+{% block content %}
+<section>
+	<h1>Comparateur de calculatrices CASIO</h1>
+	<hr>
+	<p>
+		Cette page recense la majorité des calculatrices CASIO distribuées en
+		France depuis 2005. Le tableau comparatif contient tous les détails
+		logiciels et matériels des modèles, ainsi que de nombreux liens vers
+		les ressources associées.
+	</p>
+
+	<h4>Sélection des modèles</h4>
+	<p>
+		<button onclick="select_set(default_set)">Afficher les modèles actuels</button>
+		<button onclick="select_all()">Tout afficher</button>
+	</p>
+
+	<div>
+		<a id="calcdb-permalink" href="https://www.planet-casio.com/Fr/infos/comparateur?g25+e2,g35+e2,g90+e,cp400+e">Lien permanent vers cette configuration</a>
+	</div>
+
+	<div id="calcdb-checkboxes">
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g25ppro" data-name="g25+pro">
+			<img src="/static/icons/calc/g25+pro.png">
+			<span>Graph 25+ Pro</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g25pe" data-name="g25+e">
+			<img src="/static/icons/calc/g25+e.png">
+			<span>Graph 25+E</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="g25pe2" data-name="g25+e2">
+			<img src="/static/icons/calc/g25+e2.png">
+			<span>Graph 25+E II</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35p" data-name="g35+">
+			<img src="/static/icons/calc/g35+.png">
+			<span>Graph 35+</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35pusb3" data-name="g35+usb3">
+			<img src="/static/icons/calc/g35+usb3.png">
+			<span>Graph 35+ USB (SH3)</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35pusb4" data-name="g35+usb4">
+			<img src="/static/icons/calc/g35+usb4.png">
+			<span>Graph 35+ USB (SH4)</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g35pe" data-name="g35+e">
+			<img src="/static/icons/calc/g35+e.png">
+			<span>Graph 35+E</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="g35pe2" data-name="g35+e2">
+			<img src="/static/icons/calc/g35+e2.png">
+			<span>Graph 35+E II</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g75" data-name="g75">
+			<img src="/static/icons/calc/g75.png">
+			<span>Graph 75</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g75p" data-name="g75+">
+			<img src="/static/icons/calc/g75+.png">
+			<span>Graph 75+</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g75pe" data-name="g75+e">
+			<img src="/static/icons/calc/g75+e.png">
+			<span>Graph 75+E</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g85" data-name="g85">
+			<img src="/static/icons/calc/g85.png">
+			<span>Graph 85</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g85sd" data-name="g85sd">
+			<img src="/static/icons/calc/g85sd.png">
+			<span>Graph 85 SD</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="g95" data-name="g95">
+			<img src="/static/icons/calc/g95.png">
+			<span>Graph 95 (SD)</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cg20" data-name="cg20">
+			<img src="/static/icons/calc/cg20.png">
+			<span>Prizm</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="g90pe" data-name="g90+e">
+			<img src="/static/icons/calc/g90+e.png">
+			<span>Graph 90+E</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp300" data-name="cp300">
+			<img src="/static/icons/calc/cp300.png">
+			<span>Classpad 300</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp330" data-name="cp330">
+			<img src="/static/icons/calc/cp330.png">
+			<span>Classpad 330</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp330p" data-name="cp330+">
+			<img src="/static/icons/calc/cp330+.png">
+			<span>Classpad 330+</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" unchecked="" data-calc="cp400" data-name="cp400">
+			<img src="/static/icons/calc/cp400.png">
+			<span>Classpad 400</span>
+		</div>
+		<div>
+			<input type="checkbox" onchange="toggle_calc(this)" checked="" data-calc="cp400pe" data-name="cp400+e">
+			<img src="/static/icons/calc/cp400+e.png">
+			<span>Classpad 400+E</span>
+		</div>
+	</div>
+
+	<h4>Tableau comparatif</h4>
+	<div id="calcdb">
+		{% include "calcdb-fr.html" %}
+	</div>
+</section>
+{% endblock %}

app/templates/tools.html

@@ -14,6 +14,7 @@
       <li><a href="https://gitea.planet-casio.com">Gitea</a> (forge Git)</li>
       <li><a href="https://wiki.planet-casio.com">Wiki</a> (wiki répétoriant tout un tas de trucs)</li>
       <li><a href="https://bible.planet-casio.com">Bible</a> (la bible du programmeur Casio bas niveau)</li>
+      <li><a href="{{ url_for('calc_comparator') }}">Comparateur de calculatrices</a> (Un comparateur des calculatrices CASIO)</li>
     </ul>
   </p>
 </section>