This repository has been archived on 2023-02-21. You can view files and clone it, but cannot push or open issues or pull requests.
calebasse/mockups/un-dossier.html

499 lines
16 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<h1><a href="accueil.html">APS 42</a></h1>
<span>Dossiers - CMPP</span>
</div>
<div id="splash" class="cmpp">
<div id="user-links">
<a href="connexion.html">Déconnexion</a>
</div>
</div>
<div id="content">
<div id="appbar">
<h2>Bouclier Guillaume - Dossier 56789</h2>
<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>
<li><label>N° dossier papier :</label> 12345 <button></button></li>
<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 -->
<div class="frame">
<h3>État civil</h3>
<button class="save"></button>
<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>
<div class="frame">
<h3>Physiologie</h3>
<button class="save"></button>
<p><label>Taille (cm) :</label> <input value="176"/>
<label>Poids (kg) :</label> <input value="68"/>
<label>Terme en semaines :</label> <input/></p>
</div>
<div class="frame">
<h3>Inscription</h3>
<button class="save"></button>
<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>
<div class="frame">
<h3>Famille</h3>
<button class="save"></button>
<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>
<div class="frame">
<h3>Transport</h3>
<button class="save"></button>
<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>
<div class="frame">
<h3>Suivi du patient</h3>
<button class="save"></button>
<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>
<div class="frame">
<h3>16 rue du Clocher</h3>
<div class="buttons"><button></button> <button></button></div>
<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>
<button></button> <button></button>
</div>
<p>2 70 12 34 567 890 12</p>
<p>06 12 34 56 78</p>
</div>
<div class="contact patient">
<h4>M. Guillaume Bouclier (PATIENT)</h4>
<div class="right">
<input type="radio" name="radio-assure" >Assuré</input>
<button></button> <button></button>
</div>
<p>1 04 12 34 567 890 12</p>
</div>
</div>
<div class="frame">
<h3>2 rue du Château</h3>
<div class="buttons"><button></button> <button></button></div>
<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">
<h4>M. John Leponge</h4>
<div class="right">
<input type="radio" name="radio-assure">Assuré</input>
<button></button> <button></button>
</div>
<p>1 70 12 34 567 890 12</p>
</div>
</div>
</div>
<div id="tabs-4"> <!-- Prise en charge -->
<div id="patient-diag">
<div class="frame">
<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;">
<div class="frame">
<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>
<div class="frame">
<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;">
<div class="frame">
<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>
<div class="frame">
<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>
<div class="frame">
<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>