Create a nice(r) html page
This commit is contained in:
eeva
parent
09a575f416
commit
f64e632143
6 changed files with 233 additions and 27 deletions
|
|
@ -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
84
cherche.css
Normal 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
10
cherche.html
|
|
@ -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>
|
||||
|
|
|
|||
63
cherche.js
63
cherche.js
|
|
@ -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
49
cherche.sass
Normal 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
46
reset.sass
Normal 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
|
||||
Loading…
Reference in a new issue