Project-Timeline/timeline-picker
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Create a nice(r) html page

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Readme.md
View file

@ -7,7 +7,6 @@ Description
Simple explorer for the Simple explorer for the
[CISP-2](https://fr.wikipedia.org/wiki/Classification_internationale_des_soins_primaires_%28CISP%29), [CISP-2](https://fr.wikipedia.org/wiki/Classification_internationale_des_soins_primaires_%28CISP%29),
the French version of International Classification of Primary Care. 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), It is built on top of [LokiJS](http://lokijs.org),
[jquery-csv](https://code.google.com/p/jquery-csv) and [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 proper (meaning great and open-source) software suite for
[General practitioners](https://en.wikipedia.org/wiki/General_practitioner). [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. ~~Make the search case-insensitive (as well as accents insensitive)~~
0. ~~BUG: trim spaces from search expression~~ 0. ~~BUG: trim spaces from search expression~~
0. ~~BUG: fix search for codes also~~ 0. ~~BUG: fix search for codes also~~
0. ~~BUG: don't search for empty string~~ 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 it chrome compatible (some trouble with the first ajax call)
0. Make the search mis-spelling safe (like Google does) 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; }

10
cherche.html
View file

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

63
cherche.js
View file

@ -1,5 +1,4 @@
// Create a new db and fill it with the CISP info // 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 // Using lokiJS, because it is enough and fast
var db = new loki('db.json'); var db = new loki('db.json');
@ -12,6 +11,8 @@ cisp.ensureUniqueIndex("Code");
var words = db.addCollection('vocabulaire2db'); var words = db.addCollection('vocabulaire2db');
words.ensureUniqueIndex("Word"); words.ensureUniqueIndex("Word");
// Some config variables
var maxNbRes = 5;
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////
@ -167,8 +168,25 @@ $.ajax({
} }
}); });
function displayMany (a) { function listMany (a,c) {
var out = a.map(function (o) { 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 d = cisp.by("Description", o.Orig);
var ds = d ? var ds = d ?
"<tr><td>"+d.Code+"</td>" "<tr><td>"+d.Code+"</td>"
@ -187,35 +205,40 @@ function displayMany (a) {
: ""; : "";
} }
return ds + cs; 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; return pv + cv;
},""); },"");
var table = "<table>"; return out;
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;
} }
// Main application // Main application
function main() { function main() {
var currentSelection = 0;
//console.log(cisp.data); //console.log(cisp.data);
//console.log(words.data); //console.log(words.data);
$( "#question" ).keyup(function () { $( "#question" ).keyup(function (e) {
var str = removeDiacritics($( "#question" ).val()); var str = removeDiacritics($( "#question" ).val());
var cleanstr = str ? str.trim() : null; 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 }}); var ans = words.find({'Word': { '$contains': cleanstr }});
//console.log("Words found: ",ans); if (ans.length > 0) {
//console.log(displayMany(ans)); if (e.key == "ArrowDown") {
$( "#answer" ).empty().append(displayMany(ans)); 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