calebasse/mockups/un-dossier.html @ ff25533d
| 20ddf8d8 | Frédéric Péters | <!DOCTYPE html>
|
|
<html lang="fr">
|
|||
<head>
|
|||
<meta charset="utf-8"/>
|
|||
<title>APS42 — Dossier - 12346 - Bouclier Guillaume</title>
|
|||
<link rel="stylesheet" type="text/css" media="all" href="css/style.css"/>
|
|||
<link rel="stylesheet" type="text/css" media="all" href="css/smoothness/jquery-ui-1.8.21.custom.css"/>
|
|||
<script src="js/jquery-1.7.2.min.js"></script>
|
|||
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
|
|||
<script src="development-bundle/ui/i18n/jquery.ui.datepicker-fr.js"></script>
|
|||
<script>
|
|||
$(function() {
|
|||
$('#tabs').tabs();
|
|||
$('#clore-dossier').click(function() {
|
|||
$('#dossier-change').dialog({title: 'Changement - Clôture',
|
|||
width: '500px',
|
|||
buttons: [ { text: "Annuler",
|
|||
click: function() { $(this).dialog("close"); } },
|
|||
{ text: "Valider",
|
|||
click: function() { $(this).dialog("close"); } }]}
|
|||
);
|
|||
});
|
|||
$('#reaccueillir-dossier').click(function() {
|
|||
$('#dossier-change').dialog({title: 'Changement - Réaccueil',
|
|||
width: '500px',
|
|||
buttons: [ { text: "Annuler",
|
|||
click: function() { $(this).dialog("close"); } },
|
|||
{ text: "Valider",
|
|||
click: function() { $(this).dialog("close"); } }]}
|
|||
);
|
|||
});
|
|||
$('#historique-dossier').click(function() {
|
|||
$('#dossier-histo-dlg').dialog({title: 'Historique dossier',
|
|||
width: '500px',
|
|||
buttons: [ { text: "Fermer",
|
|||
click: function() { $(this).dialog("close"); } }]}
|
|||
);
|
|||
});
|
|||
$('#new-address-btn').click(function() {
|
|||
$('#new-address-dlg').dialog({title: 'Nouvelle adresse',
|
|||
width: '500px',
|
|||
buttons: [ { text: "Annuler",
|
|||
click: function() { $(this).dialog("close"); } },
|
|||
{ text: "Valider",
|
|||
click: function() { $(this).dialog("close"); } }]}
|
|||
);
|
|||
});
|
|||
$('#add-prise-en-charge-btn').click(function() {
|
|||
$('#add-prise-en-charge-dlg').dialog({title: 'Prise en charge',
|
|||
width: '300px',
|
|||
buttons: [ { text: "Annuler",
|
|||
click: function() { $(this).dialog("close"); } },
|
|||
{ text: "Valider",
|
|||
click: function() { $(this).dialog("close"); } }]}
|
|||
);
|
|||
});
|
|||
$('#add-prolongation-btn').click(function() {
|
|||
$('#add-prolongation-dlg').dialog({title: 'Prolongation',
|
|||
width: '300px',
|
|||
buttons: [ { text: "Annuler",
|
|||
click: function() { $(this).dialog("close"); } },
|
|||
{ text: "Valider",
|
|||
click: function() { $(this).dialog("close"); } }]}
|
|||
);
|
|||
});
|
|||
$('button.blind').next().hide();
|
|||
$('button.blind').click(function() {
|
|||
$(this).next().toggle('blind');
|
|||
});
|
|||
});
|
|||
</script>
|
|||
</head>
|
|||
<body>
|
|||
<div id="wrap-large">
|
|||
<div id="header">
|
|||
| d79295fb | Frédéric Péters | <h1><a href="accueil.html">APS 42</a></h1>
|
|
| 92899e88 | Frédéric Péters | <span>Dossiers - CMPP</span>
|
|
| 20ddf8d8 | Frédéric Péters | </div>
|
|
| 92899e88 | Frédéric Péters | <div id="splash" class="cmpp">
|
|
| 20ddf8d8 | Frédéric Péters | <div id="user-links">
|
|
<a href="connexion.html">Déconnexion</a>
|
|||
</div>
|
|||
</div>
|
|||
<div id="content">
|
|||
<div id="appbar">
|
|||
| 9277c5cf | Mikaël Ates | <h2>Bouclier Guillaume - Dossier 56789</h2>
|
|
| 20ddf8d8 | Frédéric Péters | <a href="dossiers.html">Retourner aux dossiers</a>
|
|
<button>Supprimer</button>
|
|||
</div>
|
|||
<div id="tabs">
|
|||
<ul>
|
|||
<li><a href="#tabs-1">Général</a></li>
|
|||
<li><a href="#tabs-2">Fiche administrative</a></li>
|
|||
<li><a href="#tabs-3">Adresses / contacts</a></li>
|
|||
<li><a href="#tabs-4">Prise en charge</a></li>
|
|||
<!--<li><a href="#tabs-5">Liste des actes</a>-->
|
|||
<li><a href="#tabs-6">Prochains rendez-vous</a>
|
|||
<li><a href="#tabs-7">Socialisation</a>
|
|||
<li><a href="#tabs-8">Données à caractère médical</a>
|
|||
</ul>
|
|||
<div id="tabs-1"> <!-- Général -->
|
|||
<div class="left">
|
|||
<ul>
|
|||
| 9889ad72 | Frédéric Péters | <li><label>N° dossier papier :</label> 12345 <button>✍</button></li>
|
|
| 20ddf8d8 | Frédéric Péters | <li><label>N° dossier informatique :</label> 67890</li>
|
|
<li><label>Nom :</label> Bouclier</li>
|
|||
<li><label>Prénom :</label> Guillaume</li>
|
|||
<li><label>Date de naissance :</label> 1/1/2005</li>
|
|||
<li><label>Lieux de vie :</label>
|
|||
<ul>
|
|||
<li>Adresse A - Téléphone A</li>
|
|||
<li>Adresse B - Téléphone B</li>
|
|||
</ul></li>
|
|||
<li><label>Date d'inscription :</label> 01/06/2012</li>
|
|||
<li><label>Lieu de socialisation :</label> École Truc</li>
|
|||
<li><label>Commentaire :</label><br/><textarea cols="50" rows="5"></textarea> <button>Mettre à jour</button></li>
|
|||
</ul>
|
|||
</div>
|
|||
<div class="right">
|
|||
<ul>
|
|||
<li><label>Dernier acte :</label> 28/06/2012 - T - absence excusée</li>
|
|||
<li><label>Prochain rendez-vous :</label> 18/08/2012 - Roudon - mini synthèse.</li>
|
|||
</ul>
|
|||
<div class="etat">
|
|||
<h4>État du dossier : en diagnostic</h4>
|
|||
<p>depuis le 20/05/2012</p>
|
|||
<p><label>Commentaire :</label> bla bla bla bla</p>
|
|||
<button id="clore-dossier">Clore</button>
|
|||
<button id="reaccueillir-dossier">Ré-accueillir</button>
|
|||
<button id="historique-dossier">Historique</button><br/>
|
|||
<hr/>
|
|||
3/6 diagnostics
|
|||
</div>
|
|||
<div class="notifs">
|
|||
<h4>Notifications</h4>
|
|||
<ul>
|
|||
<li>Dossier en pause facturation <button>Sortir</button></li>
|
|||
</ul>
|
|||
</div>
|
|||
</div>
|
|||
<br style="clear:both"/>
|
|||
</div>
|
|||
<div id="tabs-2"> <!-- Fiche administrative -->
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>État civil</h3>
|
|
| 9889ad72 | Frédéric Péters | <button class="save">✔</button>
|
|
| 20ddf8d8 | Frédéric Péters | <p><label>Nom :</label> <input value="Bouclier"/>
|
|
<label>Prénom(s) :</label> <input value="Guillaume"/></p>
|
|||
<p><label>Date de naissance :</label> <input value="1/1/2005"/>
|
|||
<label>Genre :</label> <input value="M"/>
|
|||
<label>Nationalité :</label> <input value="française"/></p>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>Physiologie</h3>
|
|
| 9889ad72 | Frédéric Péters | <button class="save">✔</button>
|
|
| 20ddf8d8 | Frédéric Péters | <p><label>Taille (cm) :</label> <input value="176"/>
|
|
<label>Poids (kg) :</label> <input value="68"/>
|
|||
<label>Terme en semaines :</label> <input/></p>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>Inscription</h3>
|
|
| 9889ad72 | Frédéric Péters | <button class="save">✔</button>
|
|
| 20ddf8d8 | Frédéric Péters | <p>
|
|
<label>Motif (analysé) :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Motif (famille) :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Conseilleur :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
</p>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>Famille</h3>
|
|
| 9889ad72 | Frédéric Péters | <button class="save">✔</button>
|
|
| 20ddf8d8 | Frédéric Péters | <p><label>Place dans la fratrie :</label> <input size="4"/>
|
|
<label>Nombre d'enfants dans la fratrie :</label> <input size="4"/>
|
|||
<label>Rang (gémellité) :</label> <input size="4"/>
|
|||
</p>
|
|||
<p>
|
|||
<label>Autorité parentale :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Situation familiale :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Garde parentale :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
</p>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>Transport</h3>
|
|
| 9889ad72 | Frédéric Péters | <button class="save">✔</button>
|
|
| 20ddf8d8 | Frédéric Péters | <p>
|
|
<label>Type de transport :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Compagnie de transport :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
</p>
|
|||
<table>
|
|||
<tr><td><button>Attestation</button></td> <td><button>Prescription</td></tr>
|
|||
<tr><td>Dernière attestation le 25/07/2012 <button>Historique</button></td>
|
|||
<td>Dernière prescription le 25/07/2012 <button>Historique</button></td></tr>
|
|||
</table>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>Suivi du patient</h3>
|
|
| 9889ad72 | Frédéric Péters | <button class="save">✔</button>
|
|
| 20ddf8d8 | Frédéric Péters | <p>
|
|
<label>Coordinateur I :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Coordinateur II :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Coordinateur III :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
</p>
|
|||
<p>
|
|||
<label>Médecin extérieur :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
<label>Intervenant extérieur :</label> <select><option>Indéfini</option></select> <button>+</button>
|
|||
</p>
|
|||
</div>
|
|||
</div>
|
|||
<div id="tabs-3"> <!-- Adresses / Contacts -->
|
|||
<button id="new-address-btn">Nouvelle adresse</button> <button>Nouveau contact</button>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>16 rue du Clocher</h3>
|
|
| 9889ad72 | Frédéric Péters | <div class="buttons"><button>➖</button> <button>✍</button></div>
|
|
| 20ddf8d8 | Frédéric Péters | <div class="right">
|
|
<input type="checkbox" checked>Lieu de vie</input>
|
|||
</div>
|
|||
<p>13004 Marseille</p>
|
|||
<p>04 91 12 34 56</p>
|
|||
<div class="contact">
|
|||
<h4>Mme Marie Carmarie</h4>
|
|||
<div class="right">
|
|||
<input type="radio" name="radio-assure" checked="checked">Assuré</input>
|
|||
| 9889ad72 | Frédéric Péters | <button>➖</button> <button>✍</button>
|
|
| 20ddf8d8 | Frédéric Péters | </div>
|
|
<p>2 70 12 34 567 890 12</p>
|
|||
<p>06 12 34 56 78</p>
|
|||
</div>
|
|||
<div class="contact patient">
|
|||
| cf6197b7 | Frédéric Péters | <h4>M. Guillaume Bouclier (PATIENT)</h4>
|
|
| 20ddf8d8 | Frédéric Péters | <div class="right">
|
|
<input type="radio" name="radio-assure" >Assuré</input>
|
|||
| 9889ad72 | Frédéric Péters | <button>➖</button> <button>✍</button>
|
|
| 20ddf8d8 | Frédéric Péters | </div>
|
|
<p>1 04 12 34 567 890 12</p>
|
|||
</div>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>2 rue du Château</h3>
|
|
| 9889ad72 | Frédéric Péters | <div class="buttons"><button>➖</button> <button>✍</button></div>
|
|
| 20ddf8d8 | Frédéric Péters | <div class="right">
|
|
<input type="checkbox">Lieu de vie</input>
|
|||
</div>
|
|||
<p>42000 Saint-Etienne</p>
|
|||
<p>04 77 12 34 56</p>
|
|||
<div class="contact">
|
|||
| cf6197b7 | Frédéric Péters | <h4>M. John Leponge</h4>
|
|
| 20ddf8d8 | Frédéric Péters | <div class="right">
|
|
<input type="radio" name="radio-assure">Assuré</input>
|
|||
| 9889ad72 | Frédéric Péters | <button>➖</button> <button>✍</button>
|
|
| 20ddf8d8 | Frédéric Péters | </div>
|
|
<p>1 70 12 34 567 890 12</p>
|
|||
</div>
|
|||
</div>
|
|||
</div>
|
|||
<div id="tabs-4"> <!-- Prise en charge -->
|
|||
<div id="patient-diag">
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>En diagnostic depuis le 11 juin 2012</h3>
|
|
<ul>
|
|||
<li><input size="4" value="6"/> actes prévus</li>
|
|||
<li><strong>3</strong> actes réalisés dont <strong>2</strong> facturés <button class="blind">détails</button>
|
|||
<ul>
|
|||
<li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>2</strong> actes
|
|||
<ul>
|
|||
<li>Accueil le 11 juin 2012 - 9h00 - 45 minutes - Bob Leponge</li>
|
|||
<li>Dialogue le 12 juin 2012 - 10h00 - 30 minutes - Bob Leponge</li>
|
|||
</ul></li>
|
|||
<li>Non facturé - <strong>1 acte</strong>
|
|||
<ul>
|
|||
<li>Dialogue le 13 juin 2012 - 11h00 - 45 minutes - Sandy Kilo</li>
|
|||
</ul></li>
|
|||
</ul>
|
|||
</li>
|
|||
</ul>
|
|||
</div>
|
|||
</div>
|
|||
<div id="patient-traitement" style="display: none;">
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>En diagnostic depuis le 6 mars 2012</h3>
|
|
<ul>
|
|||
<li><strong>6</strong> actes réalisés et facturés <button class="blind">détails</button>
|
|||
<ul>
|
|||
<li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>6</strong> actes
|
|||
<ul>
|
|||
<li>...</li>
|
|||
</ul></li>
|
|||
</ul>
|
|||
</li>
|
|||
</ul>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>En traitement depuis le 11 juin 2012</h3>
|
|
<ul>
|
|||
<li><strong>4</strong> actes réalisés <button class="blind">détails</button>
|
|||
<ul><li>...</li></ul>
|
|||
</li>
|
|||
<li>Pas de prise en charge - <button id="add-prise-en-charge-btn">Ajouter une prise en charge</button></li>
|
|||
</ul>
|
|||
</div>
|
|||
</div>
|
|||
<div id="patient-traitement-charge" style="display: none;">
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>En diagnostic depuis le 2 avril 2008</h3>
|
|
<ul>
|
|||
<li><strong>3</strong> actes réalisés et facturés <button class="blind">détails</button>
|
|||
<ul>
|
|||
<li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>3</strong> actes
|
|||
<ul>
|
|||
<li>...</li>
|
|||
</ul></li>
|
|||
</ul>
|
|||
</li>
|
|||
</ul>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>En diagnostic depuis le 5 octobre 2010</h3>
|
|
<ul>
|
|||
<li><strong>6</strong> actes réalisés et facturés <button class="blind">détails</button>
|
|||
<ul>
|
|||
<li>Facturation <strong>28</strong> (assuré: Sophie Fonfec) - <strong>6</strong> actes
|
|||
<ul>
|
|||
<li>...</li>
|
|||
</ul></li>
|
|||
</ul>
|
|||
</li>
|
|||
</ul>
|
|||
</div>
|
|||
| b4e9e32b | Frédéric Péters | <div class="frame">
|
|
| 20ddf8d8 | Frédéric Péters | <h3>En traitement depuis le 12 décembre 2010</h3>
|
|
<ul>
|
|||
<li>Prise en charge depuis le 12 décembre 2010
|
|||
<ul>
|
|||
<li><strong>30</strong> actes réalisés et facturés <button class="blind">détails</button>
|
|||
<ul><li>...</li></ul></li>
|
|||
<li><strong>10</strong> actes réalisés et facturés en prolongation <button class="blind">détails</button>
|
|||
<ul><li>...</li></ul></li>
|
|||
<li><strong>6</strong> actes réalisés et non pris en charge <button class="blind">détails</button>
|
|||
<ul><li>...</li></ul></li>
|
|||
</ul>
|
|||
</li>
|
|||
<li>Prise en charge depuis le 15 décembre 2011
|
|||
<ul>
|
|||
<li><strong>30</strong> actes réalisés et facturés <button class="blind">détails</button>
|
|||
<ul><li>...</li></ul></li>
|
|||
<li><strong>6</strong> actes réalisés non facturés <button class="blind">détails</button>
|
|||
<ul><li>...</li></ul></li>
|
|||
<li><button id="add-prolongation-btn">Ajouter une prolongation</button></li>
|
|||
</ul>
|
|||
</li>
|
|||
</ul>
|
|||
</div>
|
|||
</div>
|
|||
<div id="overlay">
|
|||
<p>
|
|||
Exemples pour cet onglet :
|
|||
<a href="#" onclick="$('#patient-diag').show(); $('#patient-traitement').hide(); $('#patient-traitement-charge').hide();">Patient en diagnostic</a> -
|
|||
<a href="#" onclick="$('#patient-diag').hide(); $('#patient-traitement').show(); $('#patient-traitement-charge').hide();">Patient en traitement</a> -
|
|||
<a href="#" onclick="$('#patient-diag').hide(); $('#patient-traitement').hide(); $('#patient-traitement-charge').show();">Patient en traitement avec prise en charge</a>
|
|||
</p>
|
|||
</div>
|
|||
</div>
|
|||
<!--
|
|||
<div id="tabs-5">
|
|||
</div>
|
|||
-->
|
|||
<div id="tabs-6">
|
|||
</div>
|
|||
<div id="tabs-7">
|
|||
</div>
|
|||
<div id="tabs-8">
|
|||
</div>
|
|||
</div>
|
|||
<div id="footer">
|
|||
—
|
|||
</div>
|
|||
</div>
|
|||
<div id="dossier-change" style="display: none;">
|
|||
<form>
|
|||
<p>
|
|||
<label for="id_date">Date :</label>
|
|||
<input id="id_date" class="date" name="date" value="5/7/2012"/>
|
|||
</p>
|
|||
<p>
|
|||
<label for="id_comment">Commentaire :</label>
|
|||
<textarea id="id_comment" style="width: 90%;"></textarea>
|
|||
</p>
|
|||
</form>
|
|||
</div>
|
|||
<div id="dossier-histo-dlg" style="display: none;">
|
|||
<dl>
|
|||
<dt><b>20/05/2012</b> <small>(date info: 22/05/2012)</small></dt>
|
|||
<dd>
|
|||
<p><b>en diagnostic</b>; <label>commentaire:</label> bla bla bla bla</p>
|
|||
<p>changement manuel (par M. Tom)</p>
|
|||
</dd>
|
|||
<dt><b>10/05/2012</b></dt>
|
|||
<dd>
|
|||
<p><b>accueil</b>; <label>commentaire:</label> bla bla bla bla</p>
|
|||
<p>changement manuel (par M. Tom)</p>
|
|||
</dd>
|
|||
</dl>
|
|||
</div>
|
|||
<div id="new-address-dlg" style="display: none;">
|
|||
<form>
|
|||
<table>
|
|||
<tr>
|
|||
<td>
|
|||
<label for="id_numero">Numéro :</label><br/>
|
|||
<input id="id_numero" class="numero" name="numero" size="10"/>
|
|||
</td>
|
|||
<td>
|
|||
<label for="id_rue">Rue :</label><br/>
|
|||
<input id="id_rue" class="rue" name="rue" size="35"/>
|
|||
</td>
|
|||
</tr>
|
|||
<tr>
|
|||
<td>
|
|||
<label for="id_cp">Code postal :</label><br/>
|
|||
<input id="id_cp" class="cp" name="cp" size="10"/>
|
|||
</td>
|
|||
<td>
|
|||
<label for="id_ville">Ville :</label><br/>
|
|||
<input id="id_ville" class="ville" name="ville" size="35"/>
|
|||
</td>
|
|||
</tr>
|
|||
</table>
|
|||
<p>
|
|||
<br/>
|
|||
<label for="id_tel">Téléphone :</label>
|
|||
<input id="id_tel" class="tel" name="tel" size="35"/>
|
|||
<button>+</button>
|
|||
<p>
|
|||
<input type="checkbox">Lieu de vie</input>
|
|||
</p>
|
|||
</form>
|
|||
</div>
|
|||
<div id="add-prise-en-charge-dlg" style="display: none;">
|
|||
<div>
|
|||
<label for="id_partir">À partir du :</label>
|
|||
<input id="id_partir" class="partir" name="partir" size="10" value="11/06/2012"/>
|
|||
</div>
|
|||
<div>
|
|||
<label for="id_pour">Pour :</label>
|
|||
<input id="id_pour" class="pour" name="pour" size="4" value="30"/> séances
|
|||
</div>
|
|||
</div>
|
|||
<div id="add-prolongation-dlg" style="display: none;">
|
|||
<div>
|
|||
<label for="id_pour">Pour :</label>
|
|||
<input id="id_pour" class="pour" name="pour" size="4" value="10"/> actes
|
|||
</div>
|
|||
</div>
|
|||
</body>
|
|||
</html>
|