Create a nice(r) html page

This commit is contained in:
eeva 2015-09-20 00:04:32 +02:00
parent 09a575f416
commit f64e632143
6 changed files with 233 additions and 27 deletions

View File

@ -7,7 +7,6 @@ Description
Simple explorer for the
[CISP-2](https://fr.wikipedia.org/wiki/Classification_internationale_des_soins_primaires_%28CISP%29),
the French version of International Classification of Primary Care.
Changing the csv file should allow you to make the english version work.
It is built on top of [LokiJS](http://lokijs.org),
[jquery-csv](https://code.google.com/p/jquery-csv) and
@ -17,15 +16,16 @@ Ideally, this would only be the first building block for a
proper (meaning great and open-source) software suite for
[General practitioners](https://en.wikipedia.org/wiki/General_practitioner).
Start it by calling you internet navigator on `cherche.html`.
Start it by pointing your internet navigator to the page `cherche.html`.
Todo (sorted by priority)
TODOs (sorted by priority)
-------------------------
0. ~~Make the search case-insensitive (as well as accents insensitive)~~
0. ~~BUG: trim spaces from search expression~~
0. ~~BUG: fix search for codes also~~
0. ~~BUG: don't search for empty string~~
0. Create a nice html page (may take several steps)
0. ~~Create a nice html page (may take several steps)~~
0. Make it chrome compatible (some trouble with the first ajax call)
0. Make the search mis-spelling safe (like Google does)
0. Changing the csv file should allow to make other databases work too.

84
cherche.css Normal file
View File

@ -0,0 +1,84 @@
/* This is the main style file for
the search module */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after {
content: '';
content: none; }
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
body {
background-color: #222; }
#question {
background-color: #EEE;
width: 40em;
display: block;
border: none;
margin: 20ex auto 0 auto;
padding: 1em 1em 0em 1em;
color: #000;
font-size: inherit; }
#proposition {
background-color: #EEE;
width: 40em;
display: block;
margin: 0 auto;
padding: 0em 1em 1em 1em;
color: #666666;
font-size: inherit; }
#selected {
font-weight: bold; }
#answer {
background-color: #DFE;
width: 40em;
display: block;
margin: 1em auto;
padding: 1em;
color: #666666;
font-size: inherit; }
#answerTable {
width: inherit;
text-align: left; }
#answerTable th {
font-weight: bold; }

View File

@ -3,14 +3,18 @@
<head>
<meta charset="utf-8">
<title>Chercher dans la norme CISP-2</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="cherche.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.csv-0.71.min.js"></script>
<script src="lokijs.min.js"></script>
<script src="cherche.js"></script>
</head>
<body>
<input id="question" type="text" \> ?
<div id="answer">Réponse ici</div>
<input id="question" type="text" \>
<div id="proposition"></div>
<div id="answer">
<table id="answerTable">
</table>
</div>
</body>
</html>

View File

@ -1,5 +1,4 @@
// Create a new db and fill it with the CISP info
// TODO: remove this step and create a persistent DB object
// Using lokiJS, because it is enough and fast
var db = new loki('db.json');
@ -12,6 +11,8 @@ cisp.ensureUniqueIndex("Code");
var words = db.addCollection('vocabulaire2db');
words.ensureUniqueIndex("Word");
// Some config variables
var maxNbRes = 5;
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@ -167,8 +168,25 @@ $.ajax({
}
});
function displayMany (a) {
var out = a.map(function (o) {
function listMany (a,c) {
var out = a.slice(0,maxNbRes).map(function (o) {
return o.Orig;
}).reduce(function (pv,cv,i,a) {
if (i==c) { cv = "<span id=\"selected\">" + cv + "</span>" }
return pv + cv + "<br />";
},"");
return out;
}
var title = "<tr>";
title += "<th>Code</th>";
title += "<th>Description</th>";
title += "<th>Thème</th>";
title += "<th>Catégorie</th>";
title += "</tr>";
function displayOne (o) {
var d = cisp.by("Description", o.Orig);
var ds = d ?
"<tr><td>"+d.Code+"</td>"
@ -187,35 +205,40 @@ function displayMany (a) {
: "";
}
return ds + cs;
}).reduce(function (pv,cv,i,a) {
}
function displayMany (a) {
var out = a.map(displayOne).reduce(function (pv,cv,i,a) {
return pv + cv;
},"");
var table = "<table>";
table += "<tr>";
table += "<th>Code</th>";
table += "<th>Description</th>";
table += "<th>Thème</th>";
table += "<th>Catégorie</th>";
table += "</tr>";
table += out;
table += "</table>";
return table;
return out;
}
// Main application
function main() {
var currentSelection = 0;
//console.log(cisp.data);
//console.log(words.data);
$( "#question" ).keyup(function () {
$( "#question" ).keyup(function (e) {
var str = removeDiacritics($( "#question" ).val());
var cleanstr = str ? str.trim() : null;
if (str == "" || str == null) {
$( "#proposition" ).empty();
$( "#answerTable" ).empty();
return;
}
$( "#answerTable" ).empty().append(title);
var ans = words.find({'Word': { '$contains': cleanstr }});
//console.log("Words found: ",ans);
//console.log(displayMany(ans));
$( "#answer" ).empty().append(displayMany(ans));
if (ans.length > 0) {
if (e.key == "ArrowDown") {
currentSelection = (currentSelection + 1) % Math.min(maxNbRes,ans.length);
} else {
currentSelection = 0;
}
$( "#proposition" ).empty().append(listMany(ans,currentSelection));
$( "#answerTable" ).append(displayOne(ans[currentSelection]));
}
});
}

49
cherche.sass Normal file
View File

@ -0,0 +1,49 @@
/* This is the main style file for
the search module
@import reset.sass
$textColor: #000
$mainWidth: 40em
$bgColor: #EEE
$altbgColor: #DFE
body
:background-color #222
#question
:background-color $bgColor
:width $mainWidth
:display block
:border none
:margin 20ex auto 0 auto
:padding 1em 1em 0em 1em
:color $textColor
:font-size inherit
#proposition
:background-color $bgColor
:width $mainWidth
:display block
:margin 0 auto
:padding 0em 1em 1em 1em
:color lighten($textColor,40)
:font-size inherit
#selected
:font-weight bold
#answer
:background-color $altbgColor
:width $mainWidth
:display block
:margin 1em auto
:padding 1em
:color lighten($textColor,40)
:font-size inherit
#answerTable
:width inherit
:text-align left
& th
:font-weight bold

46
reset.sass Normal file
View File

@ -0,0 +1,46 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video
margin: 0
padding: 0
border: 0
font-size: 100%
font: inherit
vertical-align: baseline
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section
display: block
body
line-height: 1
ol, ul
list-style: none
blockquote, q
quotes: none
blockquote
&:before, &:after
content: ''
content: none
q
&:before, &:after
content: ''
content: none
table
border-collapse: collapse
border-spacing: 0