MyCo/index.html

423 lines
16 KiB
HTML

<!DOCTYPE html>
<!--<html manifest="cache.manifest">-->
<html>
<head>
<title>MyCo</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.png">
<link rel="shortcut icon" sizes="196x196" href="icon-196x196.png">
<link rel="shortcut icon" sizes="128x128" href="icon-128x128.png">
<link rel="apple-touch-icon" sizes="128x128" href="icon-128x128.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="icon-128x128.png">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="inc/lib/bootstrap/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="inc/lib/bootstrap/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="inc/lib/html5shiv.js"></script>
<script src="inc/lib/respond.min.js"></script>
<![endif]-->
</head>
<style>
body{
margin-top: 4em;
}
#total-label {
text-align: right;
}
#total-label, #total-value {
font-weight: bold;
}
.positive {
color: green;
}
.negative {
color: red;
}
.part {
display: none;
}
#view-group h1 {
text-transform: capitalize;
}
</style>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-groupe-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">MyCo</a>
</div>
<div class="collapse navbar-collapse" id="navbar-groupe-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-th-list'></span> Groupe <b class="caret"></b></a>
<ul id="group-choice" class="dropdown-menu">
<li class="divider"></li>
<li><a href="#" id='add_group_btn' data-toggle="modal" data-target="#add_group_modal"><span class='glyphicon glyphicon-plus'><span> Nouveau</a></li>
<li><a id='clear_local_data'><span class='glyphicon glyphicon-trash'></span> Purger les données locales</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-user'></span> <span id='user-name'>Connexion</span> <b class="caret"></b></a>
<ul id="user-menu" class="dropdown-menu"></ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div id='view-home' class='part'>
<h1 id='title'></h1>
<table class="table table-striped" id='mybalances'>
<thead>
<tr>
<th>Groupe</th>
<th>Balance</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td id='total-label'>Total :</td>
<td id='total-value'></td>
</tr>
</tfoot>
</table>
</div>
<div id='view-group' class='part'>
<h1><span>Noël</span><small><span id='edit_group_btn' class='glyphicon glyphicon-edit btn btn-sm'></span></small></h1>
<form class="form-horizontal" role="form">
<input type='hidden' id='group_name' value='Noël'/>
<input type='hidden' id='edit_id' value='-1' />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Participant</span>
<select id='contributor' class="form-control">
</select>
<span class="input-group-btn">
<button type="button" class="btn btn-primary" id='edit_contributor_btn'><span class='glyphicon glyphicon-edit'></span></button>
<button type="button" class="btn btn-primary" id='del_contributor_btn'><span class='glyphicon glyphicon-trash'></span></button>
<button type="button" class="btn btn-primary" id='add_contributor_btn'><span class='glyphicon glyphicon-plus'></span></button>
</span>
</div>
</div>
</form>
<div class="btn-group">
<button id='add_contribution_btn' class="btn btn-primary"><span class='glyphicon glyphicon-plus'></span> Ajouter une dépence</span></button>
<button id='display_balance_btn' class="btn btn-info"><span class='glyphicon glyphicon-euro'></span> Balance</span></button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog"></span>
</button>
<ul class="dropdown-menu">
<li><a id='remove_group_btn'><span class='glyphicon glyphicon-trash'></span> Supprimer le groupe</span></a></li>
</ul>
</div>
</div>
<table id='contributions' class="table">
<thead>
<tr>
<th>Dépence</th>
<th>Coût</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Label</td>
<td>XXX,XX€</td>
<td>
<div class="btn-group" data-id='0'>
<button type="button" class="btn btn-default contribution_edit_btn"><span class='glyphicon glyphicon-edit'></span></button>
<button type="button" class="btn btn-default contribution_delete_btn"><span class='glyphicon glyphicon-trash'></span></button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id='total-label'>Total :</td>
<td id='total-value' colspan='2'>126,56€</td>
</tr>
</tfoot>
</table>
</div>
<div class="modal fade" id="add_group_modal" tabindex="-1" role="dialog" aria-labelledby="addGroupModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Ajouter un groupe</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Nom *</span>
<input type='text' id='add_group_name' class="form-control" placeholder='Nom'/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" id='add_group_submit'>Ajouter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="add_contributor_modal" tabindex="-1" role="dialog" aria-labelledby="addContributorModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Ajouter un participant</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<input type='hidden' id='group_name' />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Nom *</span>
<input type='text' id='add_contributor_name' class="form-control" placeholder='Nom'/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Email *</span>
<input type='text' id='add_contributor_email' class="form-control" placeholder='Email'/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" id='add_contributor_submit'>Ajouter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Connexion</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Email *</span>
<input type='text' id='login_email' class="form-control" placeholder='Email'/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Mot de passe *</span>
<input type='password' id='login_pass' class="form-control" placeholder='Mot de passe'/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Serveur *</span>
<input type='text' id='login_server' class="form-control" value='http://mycoserver.zionetrix.net'/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" id='login_submit'>Connexion</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="add_contribution_modal" tabindex="-1" role="dialog" aria-labelledby="addContributorModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Ajouter une contribution</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<input type='hidden' id='group_name' />
<input type='hidden' id='edit_id' value='-1' />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Participant *</span>
<select id='add_contribution_contributor_name' class="form-control"></select>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Titre *</span>
<input type='text' id='add_contribution_title' class="form-control" placeholder='Titre'/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Coût *</span>
<input type='text' id='add_contribution_cost' class="form-control" placeholder='0,00'/>
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Date</span>
<input type='text' id='add_contribution_date' class="form-control" placeholder='JJ/MM/AAAA'/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" id='add_contribution_submit'>Ajouter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="display_balance_modal" tabindex="-1" role="dialog" aria-labelledby="displayBalanceModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Balance</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<thead>
<tr>
<th>Participant</th>
<th>Participation</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td id='total-label'>Total :</td>
<td colspan='2' id='total-value'></td>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="confirm_modal" tabindex="-1" role="dialog" aria-labelledby="confirmModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" aria-hidden="true">&times;</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p id='question'></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default cancel">Annuler</button>
<button type="button" class="btn btn-primary" id='confirm_modal_submit'>Valider</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="myaccount_modal" tabindex="-1" role="dialog" aria-labelledby="myaccountModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Mon compte</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static" id='myaccount_email'></p>
</div>
</div>
<div class="form-group">
<label "inputName" class="col-sm-2 control-label">Nom</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="myaccount_name" placeholder="Nom" disabled>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="myaccount_password" placeholder="Mot de passe" disabled>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Serveur</label>
<div class="col-sm-10">
<p class="form-control-static" id='myaccount_server'></p>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<h1>Chargement...</h1>
</div>
<div class="modal-body">
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="inc/lib/jquery-1.10.2.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="inc/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="inc/lib/moment.min.js"></script>
<script src="inc/myco_objects.js"></script>
<script src="inc/myco_confirm.js"></script>
<script src="inc/myco.js"></script>
</body>
</html>