responsive on edit forms

This commit is contained in:
ty kayn 2019-06-12 14:13:36 +02:00
parent 91c89165c3
commit ca5f297077
16 changed files with 985 additions and 685 deletions

View File

@ -16,13 +16,14 @@
<div id="bodyland"> <div id="bodyland">
{% block bigMain %} {% block bigMain %}
{% include 'default/header.html.twig' %} {% include 'default/header.html.twig' %}
<div class="container"> <div class="row-fluid">
<div class="col-xs-12 col-sm-9 col-sm-offset-2">
{% block body %} {% block body %}
{% endblock %} {% endblock %}
</div> </div>
{% include 'default/footer.html.twig' %} </div>
{% include 'default/footer.html.twig' %}
{% endblock %} {% endblock %}
</div> </div>
{% block javascripts %} {% block javascripts %}

View File

@ -5,7 +5,7 @@
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<div class="row"> <div class="row">
<div class="col-xs-9"> <div class="col-xs-12 col-sm-9">
<div id="menu-dashboard"> <div id="menu-dashboard">
<ul class="nav"> <ul class="nav">
<li> <li>
@ -109,7 +109,12 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-xs-3 text-right"> <div class="col-xs-12 col-sm-3 text-sm-left text-md-right">
<button class="btn btn-default visible-xs pull-right" id="menu_button">
<i class="fa fa-bars"></i>
Menu
</button>
{% trans %}user.greet{% endtrans %} {% trans %}user.greet{% endtrans %}
<a href="{{ path('fos_user_profile_edit') }}"> <a href="{{ path('fos_user_profile_edit') }}">

View File

@ -1,47 +1,50 @@
{% verbatim %} <div class="current-selling">
<div class="current-selling" >
<form > <form>
<h2> <div class="row">
<div class="col-xs-12 col-sm-6">
<h2>
<a class="btn " href="{{ path('festival_index') }}">
{% verbatim %}
<i class="fa fa-th-large"></i>
Festival
</a>:
<span class="badge" title="fond de caisse + chiffre d'affaire. veillez à vider votre fond de caisse ailleurs lorsqu'il devient trop important, par exemple au dela de 200€" ng-class="{'badge-warning': activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire > 200}">
<i class="fa fa-archive"></i>
{{ activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire}} €
</span>
<span class="badge badge-success">
CA {{ activeFestival.chiffreAffaire }}
<span ng-if="sellingOk">
<i class="fa fa-check-circle-o"></i>
</span>
</span>
<span class="badge badge-success">{{ activeFestival.clientsCount }} <i class="fa fa-user"></i></span>
</h2>
</div>
<div class="col-xs-12 col-sm-6">
Festival:
<span class="badge" title="fond de caisse + chiffre d'affaire. veillez à vider votre fond de caisse ailleurs lorsqu'il devient trop important, par exemple au dela de 200€" ng-class="{'badge-warning': activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire > 200}">
<i class="fa fa-archive"></i>
{{ activeFestival.fondDeCaisseAvant + activeFestival.chiffreAffaire}} €
</span>
<span class="badge badge-success">CA {{ activeFestival.chiffreAffaire }}
<span ng-if="sellingOk">
<i class="fa fa-check-circle-o"></i>
</span>
</span>
<span class="badge badge-success">{{ activeFestival.clientsCount }} <i class="fa fa-user"></i></span>
</h2>
<input type="text" ng-model="activeFestival.name" placeholder="nom du festival"> <input type="text" ng-model="activeFestival.name" placeholder="nom du festival">
<input type="text" ng-model="activeFestival.commentaire" placeholder="commentaire"> <input class="pull-right" type="text" ng-model="activeFestival.commentaire" placeholder="commentaire">
</div>
</div>
<hr> <hr>
<div>
<div class="row-fluid">
</div>
</div>
</div> </div>
<div class="new-display"> <div class="new-display">
<div class="row"> <div class="row">
<!-- <div class="col-xs-12 col-sm-6">-->
<!-- <h2>new display without duplicates:</h2>-->
<!-- </div>-->
<div class="col-xs-12 col-sm-6"> <div class="col-xs-12 col-sm-6">
<h2>new display without duplicates:</h2> <button class="btn btn-warning btn-remove-all" ng-click="removeAll()" ng-disable="!CurrentSellingTotal()">
</div> <i class="fa fa-trash"></i> enlever tout
<div class="col-xs-12 col-sm-6">
<button class="btn btn-warning" ng-click="removeAll()" ng-disable="!CurrentSellingTotal()">
<i class="fa fa-trash"></i> enlever Tout
</button> </button>
</div> </div>
</div> </div>
@ -49,104 +52,39 @@
<div ng-repeat="group in activeSellingFiltered track by $index"> <div ng-repeat="group in activeSellingFiltered track by $index">
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-4"> <div class="col-xs-4">
<div class="input-group"> <div class="input-group">
<input type="text" ng-model="group.name"> <input type="text" ng-model="group.name">
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-4 text-right"> <div class="col-xs-4 text-right">
<strong> <strong>
{{group.unitPrice}} {{group.unitPrice}}
€ </strong> € </strong>
<span class="badge badge-default" ng-if="group.count"> <span class="badge badge-default" ng-if="group.count">
<i class="fa fa-times"></i> {{group.count}} <i class="fa fa-times"></i> {{group.count}}
</span> </span>
</div> </div>
<div class="col-xs-12 col-sm-4 text-right"> <div class="col-xs-4 text-right">
<strong> <strong>
<!--<input type="number" ng-model="p.price">--> {{group.totalPrice}}
{{group.totalPrice}} € </strong>
€ </strong> <span class="btn btn-warning remove-item"
<span class="btn btn-warning remove-item" ng-click="removeGroupeProducts(group.groupId)">
ng-click="removeGroupeProducts(group.groupId)"> <i class="fa fa-trash"></i>
<i class="fa fa-trash"></i> </span>
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="text-right">
<div class="row clickable" >
<div class="col-xs-12 col-sm-6">
<h3 ng-click="setRightAmountPaid()">Total: </h3>
</div>
<div class="col-xs-12 col-sm-6">
<h3 ng-click="setRightAmountPaid()">
<strong>
{{ CurrentSellingTotal() }}
</strong>€
</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Le client paie:
</div>
<div class="col-xs-12 col-sm-6">
<input type="number" id="paid_amount" ng-model="paidAmount">
</div>
</div>
<div class="alert alert-success" ng-if="paidAmount && CurrentSellingTotal() - paidAmount <=0">
<h3>Rendu: {{ -1*(CurrentSellingTotal() - paidAmount) }} €</h3>
</div>
<div class="alert alert-warning" ng-if="paidAmount && CurrentSellingTotal() - paidAmount >0">
<h3>il manque: {{ CurrentSellingTotal() - paidAmount }} €</h3>
</div>
</div>
<div class="row">
<div class="col">
{% endverbatim %} {% endverbatim %}
{% include 'logged/angular/validate-button.html.twig' %} {% include 'logged/angular/totals.html.twig' %}
{% verbatim %} {% include 'logged/angular/validate-button.html.twig' %}
</div> {% include 'logged/angular/pause-selling.html.twig' %}
<!--<div class="col">--> {% verbatim %}
<!--<button class="btn btn-default" id="pause_selling" ng-click="pauseSelling()">-->
<!--<i class="fa fa-clock"></i>-->
<!--Pause-->
<!--</button>-->
<!--</div>-->
</div>
<div class="old-display well">
<!--<h2>old display:</h2>-->
<!--<div ng-repeat="p in activeSelling track by $index">-->
<!--<div class="row">-->
<!--<div class="col-xs-12 col-sm-6">-->
<!--<div class="input-group">-->
<!--<input type="text" ng-model="p.name">-->
<!--<span class="btn btn-warning input-group-addon remove-item"-->
<!--ng-click="removeProduct(p,$index)">-->
<!--<i class="fa fa-trash"></i>-->
<!--</span>-->
<!--</div>-->
<!--</div>-->
<!--<div class="col-xs-12 col-sm-6 text-right">-->
<!--<strong>-->
<!--<input type="number" ng-model="p.price">-->
<!--€ </strong>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
</form> </form>
<hr>
</div> </div>
{% endverbatim %} {% endverbatim %}

View File

@ -0,0 +1,8 @@
{% verbatim %}
<!--<div class="col">-->
<!--<button class="btn btn-default" id="pause_selling" ng-click="pauseSelling()">-->
<!--<i class="fa fa-clock"></i>-->
<!--Pause-->
<!--</button>-->
<!--</div>-->
{% endverbatim %}

View File

@ -0,0 +1,30 @@
{% verbatim %}
<div class="text-right">
<div class="row clickable" >
<div class="col-xs-12 col-sm-6">
<h3 ng-click="setRightAmountPaid()">Total: </h3>
</div>
<div class="col-xs-12 col-sm-6">
<h3 ng-click="setRightAmountPaid()">
<strong>
{{ CurrentSellingTotal() }}
</strong>€
</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
Le client paie:
</div>
<div class="col-xs-12 col-sm-6">
<input class="text-right" type="number" id="paid_amount" ng-model="paidAmount">
</div>
</div>
<div class="alert alert-success" ng-if="paidAmount && CurrentSellingTotal() - paidAmount <=0">
<h3>Rendu: {{ -1*(CurrentSellingTotal() - paidAmount) }} €</h3>
</div>
<div class="alert alert-warning" ng-if="paidAmount && CurrentSellingTotal() - paidAmount >0">
<h3>il manque: {{ CurrentSellingTotal() - paidAmount }} €</h3>
</div>
</div>
{% endverbatim %}

View File

@ -1,3 +1,4 @@
{% verbatim %}
<button class="btn btn-primary btn-block validate_selling" ng-click="sendForm(event)" <button class="btn btn-primary btn-block validate_selling" ng-click="sendForm(event)"
ng-disabled="!paidAmount"> ng-disabled="!paidAmount">
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
@ -9,3 +10,4 @@
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
</span> </span>
</button> </button>
{% endverbatim %}

View File

@ -6,11 +6,13 @@
</div> </div>
{% endverbatim %} {% endverbatim %}
{% include 'logged/angular/loaded-caisse.html.twig' %} {% include 'logged/angular/loaded-caisse.html.twig' %}
{% verbatim %}
<div class="choice-categories well" ng-if="categories.length"> <div class="choice-categories well" ng-if="categories.length">
<h2> <h2>
<i class="fa-eye fa"></i> <i class="fa-eye fa"></i>
Visibilité des catégories Visibilité des
{{categories.length - categoriesVisibleCount() }} /
{{ categories.length }} catégories
</h2> </h2>
<div ng-repeat="c in categories" <div ng-repeat="c in categories"
@ -18,10 +20,15 @@
<div class="btn btn-block" <div class="btn btn-block"
ng-class="{'btn-success': !c.hidden}" ng-class="{'btn-success': !c.hidden}"
ng-click="c.hidden = !c.hidden"> ng-click="c.hidden = !c.hidden">
{% verbatim %} {{ c.name }} {{ c.name }}
{% endverbatim %}
<span ng-if="c.hidden">(caché)</span> <span ng-if="c.hidden">(caché)</span>
</div> </div>
</div> </div>
</div> </div>
<div class="well" ng-if="!categories.length">
<i class="fa fa-info"></i>
Aucune catégorie enregistrée
</div>
{% endverbatim %}

View File

@ -1,96 +1,87 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block body %} {% block body %}
<div id="wrapper"> <div id="caisse-now" class="tab-pane fade in active">
<div id="caisse-now" class="tab-pane fade in active"> <div class="caisse-main row-fluid"
<div class="caisse-main row" ng-app="caisse"
ng-app="caisse" ng-controller="CaisseCtrl as MainCtrl"
ng-controller="CaisseCtrl as MainCtrl" >
> <div class="row marged-v">
<div class="row marged-v"> <div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-12"> <button
<button title="la vente express vous permet d'enregistrer une vente pour un seul article sans remplir le formulaire de détail"
title="la vente express vous permet d'enregistrer une vente pour un seul article sans remplir le formulaire de détail" class="btn"
class="btn" ng-class="{'btn-success': expressSelling, 'btn-disabled':!expressSelling}"
ng-class="{'btn-success': expressSelling, 'btn-disabled':!expressSelling}" ng-click="expressSelling = !expressSelling">
ng-click="expressSelling = !expressSelling"> <i class="fa fa-shopping-cart"></i>
<i class="fa fa-shopping-cart"></i> mode vente express
mode vente express <span ng-if=expressSelling>
<span ng-if=expressSelling>
<i class="fa fa-check-circle"></i></span> <i class="fa fa-check-circle"></i></span>
</button> </button>
<button <button
title="montrer le nombre d'objets restants dans les stocks" title="montrer le nombre d'objets restants dans les stocks"
class="btn" class="btn"
ng-class="{'btn-success': show_config.stock_count, 'btn-disabled':!show_config.stock_count}" ng-class="{'btn-success': show_config.stock_count, 'btn-disabled':!show_config.stock_count}"
ng-click="show_config.stock_count = !show_config.stock_count"> ng-click="show_config.stock_count = !show_config.stock_count">
<i class="fa fa-shopping-cart"></i> <i class="fa fa-shopping-cart"></i>
stocks stocks
<span ng-if=show_config.stock_count> <span ng-if=show_config.stock_count>
<i class="fa fa-check-circle"></i></span> <i class="fa fa-check-circle"></i></span>
</button> </button>
<button <button
title="montrer le nombre d'objets restants dans les stocks" title="montrer le nombre d'objets restants dans les stocks"
class="btn" class="btn"
ng-class="{'btn-success': show_config.sold, 'btn-disabled':!show_config.sold}" ng-class="{'btn-success': show_config.sold, 'btn-disabled':!show_config.sold}"
ng-click="show_config.sold = !show_config.sold"> ng-click="show_config.sold = !show_config.sold">
<i class="fa fa-shopping-cart"></i> <i class="fa fa-shopping-cart"></i>
vendus vendus
<span ng-if=show_config.sold> <span ng-if=show_config.sold>
<i class="fa fa-check-circle"></i> <i class="fa fa-check-circle"></i>
</span> </span>
</button> </button>
</div> </div>
<div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-6">
<div class="row">
<div class="client-now text-right padded"> <div class="client-now text-right padded">
<i class="fa fa-user"></i> <div class="col-xs-12">
Client actuel: <i class="fa fa-user"></i>
{% verbatim %} Client actuel:
{{ activeSelling.length }} produit<span ng-if="activeSelling.length!=1">s</span> </div> {% verbatim %}
<div class="input-group pull-right"> <div class="col-xs-10">
<input class="input form-control pull-right " type="text" ng-model="sellingComment" placeholder="nom ou commentaire"> <div class="input-group">
<button type="button" class="pull-right deleter" ng-click="sellingComment = ''"> <input class="input form-control input-comment" type="text" ng-model="sellingComment" placeholder="nom ou commentaire">
<button type="button" class="deleter" ng-click="sellingComment = ''">
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
</div> </div>
<div> <div>
{{ activeSelling.length }} produit<span ng-if="activeSelling.length!=1">s</span>
{% endverbatim %} </div>{% endverbatim %}
{#<button class="btn btn-default" ng-click="sellingComment = 'boobbbbbb'">#}
{#<i class="fa fa-arrow-right"></i>#}
{#</button>#}
{#<button class="btn btn-default"#}
{#ng-click="logger(MainCtrl.sellingComment ) ; logger( sellingComment)">#}
{#<i class="fa fa-arrow-down"></i>#}
{#</button>#}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
{% include 'logged/caisse-main.html.twig' %}
{% include 'logged/caisse-main.html.twig' %} </div>
</div>
</div>
<div id="categories" class="tab-pane fade">
</div> <h2>Catégories</h2>
</div> </div>
<div id="categories" class="tab-pane fade"> <div id="products" class="tab-pane fade">
<h2>Catégories</h2> <h2>Produits</h2>
</div> </div>
<div id="products" class="tab-pane fade"> <div id="history" class="tab-pane fade">
<h2>Produits</h2> <h2>Historique</h2>
</div> </div>
<div id="history" class="tab-pane fade"> </div>
<h2>Historique</h2>
</div>
</div>
</div> </div>
{#</div>#} {#</div>#}
{#</div>#} {#</div>#}
{% endblock %} {% endblock %}

View File

@ -4,10 +4,10 @@
<div class="row"> <div class="row">
<div class="col-xs-6 well"> <div class="col-xs-12 col-sm-6 well">
{% include 'logged/mass-register.html.twig' %} {% include 'logged/mass-register.html.twig' %}
</div> </div>
<div class="col-xs-6 well"> <div class="col-xs-12 col-sm-6 well">
<h2> <h2>
Importer votre historique de ventes Importer votre historique de ventes

View File

@ -1,7 +1,7 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block body %} {% block body %}
<h1>Productcategory creation</h1> <h1>Création de catégorie de produit</h1>
{{ form_start(form) }} {{ form_start(form) }}
{{ form_widget(form) }} {{ form_widget(form) }}

View File

@ -6,10 +6,12 @@
width: 100%; width: 100%;
float: left; float: left;
} }
.product-button { .product-button {
width: 80%; width: 80%;
text-overflow-ellipsis: "..."; text-overflow-ellipsis: "...";
} }
.listing-products { .listing-products {
.btn, button { .btn, button {
@ -22,21 +24,28 @@
border-color: $all-text-color; border-color: $all-text-color;
box-shadow: 5px 3px 10px 2px #ddd; box-shadow: 5px 3px 10px 2px #ddd;
border-width: 0; border-width: 0;
&.btn-primary { &.btn-primary {
background-color: $deepblue; background-color: $deepblue;
} }
&:hover { &:hover {
background: $lightblue; background: $lightblue;
} }
} }
.badge-default { .badge-default {
background: $lightblue; background: $lightblue;
} }
.badge-success { .badge-success {
background: mix(green, $lightblue); background: mix(green, $lightblue);
} }
} }
.input-comment {
width: calc(100% - 40px);
}
} }
// container of categories // container of categories
@ -44,7 +53,7 @@
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
//width: 100%; //width: 100%;
height: 80vh; height: 75vh;
background: #ccc; background: #ccc;
padding: 0.5rem; padding: 0.5rem;
} }
@ -54,23 +63,31 @@
background: #dedede; background: #dedede;
width: 350px; width: 350px;
margin: 0 4px; margin: 0 4px;
height: calc(80vh - 1rem); height: calc(74vh - 1rem);
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
//vertical-align: top; //vertical-align: top;
white-space: nowrap; white-space: nowrap;
//float: left; //float: left;
} }
.category-listing{
.category-listing {
border: solid 1px $grey; border: solid 1px $grey;
padding: 1rem; padding: 1rem;
margin: 0.5rem; margin: 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.validate_selling { .validate_selling {
margin: 0.25rem; margin: 0.25rem;
} }
.product-listing{
.product-listing {
height: 70vh; height: 70vh;
overflow: auto; overflow: auto;
} }
.sellings{
.remove-item{
margin-left: 1em;
}
}

View File

@ -40,7 +40,7 @@ code {
#wrapper { #wrapper {
background: #FFF; background: #FFF;
margin: 1em auto; margin: 1em auto;
max-width: 800px; //max-width: 800px;
width: 95%; width: 95%;
} }

View File

@ -46,9 +46,11 @@ body {
.bg-color { .bg-color {
background: $deepblue; background: $deepblue;
color: $light; color: $light;
a { a {
color: $lightblue; color: $lightblue;
} }
padding: 1rem; padding: 1rem;
} }
@ -84,6 +86,7 @@ label {
.padded { .padded {
padding: 1rem; padding: 1rem;
&-v { &-v {
padding: 0; padding: 0;
padding-top: 1rem; padding-top: 1rem;
@ -93,6 +96,7 @@ label {
.marged { .marged {
margin: 1rem; margin: 1rem;
&-v { &-v {
margin: 0; margin: 0;
margin-top: 1rem; margin-top: 1rem;
@ -117,23 +121,25 @@ label {
} }
.previsionnel { .previsionnel {
.config { font-size: 1rem;
font-size: 1.5rem; //.config {
} // font-size: 1.5rem;
thead { //}
font-size: 1.5rem; //thead {
} // font-size: 1.5rem;
//}
label { label {
min-width: 220px; min-width: 220px;
} }
.exepanse-table {
font-size: 1.5rem; //.exepanse-table {
} // font-size: 1.5rem;
.examples-depenses { //}
font-size: 1.5rem; //.examples-depenses {
} // font-size: 1.5rem;
//}
.big-number { .big-number {
font-size: 2.5rem; font-size: 1.85rem;
color: #2B2d42; color: #2B2d42;
} }
} }
@ -147,91 +153,116 @@ input {
width: auto; width: auto;
min-width: 2em; min-width: 2em;
} }
#menu-dashboard{
background:$dark; #menu-dashboard {
background: $dark;
display: flex; display: flex;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
height: 100vh; height: 100vh;
width: 13vw; width: 13vw;
min-width: 300px;
overflow-x: auto; overflow-x: auto;
.nav{ z-index: 10;
width: 13vw;
.nav {
width: 100%;
min-width: 300px; min-width: 300px;
display: block; display: block;
border-right: solid 2px mix($dark,$grey); border-right: solid 2px mix($dark, $grey);
.btn{
.btn {
color: $light; color: $light;
} }
.btn-default{
.btn-default {
color: $light; color: $light;
&:hover{
&:hover {
background: mix($deepblue, $light); background: mix($deepblue, $light);
color: $dark ; color: $dark;
font-weight: 600; font-weight: 600;
} }
} }
} }
i.fa{
float:left; i.fa {
float: left;
margin-right: 1em; margin-right: 1em;
color: $light; color: $light;
} }
} }
.nav > li > a:hover, .nav > li > a{
&:focus{ .nav > li > a:hover, .nav > li > a {
&:focus {
background: transparent; background: transparent;
border: none; border: none;
color: $lightblue; color: $lightblue;
} }
&:focus{
&:focus {
background: transparent; background: transparent;
border: none; border: none;
color: $lightblue; color: $lightblue;
} }
} }
.btn{
border :0; .btn {
border: 0;
} }
.btn-default{
.btn-default {
background: transparent; background: transparent;
} }
.btn-success{
.btn-success {
background-color: $deepblue; background-color: $deepblue;
font-weight: 800; font-weight: 800;
} }
.table > thead > tr > td, .table > thead > tr > td,
table td{ table td {
padding: 0.5em; padding: 0.5em;
} }
.login-fosub{
.padded{ .login-fosub {
.padded {
padding: 3em; padding: 3em;
} }
input[type=submit]{
input[type=submit] {
background: $primary; background: $primary;
color:$light; color: $light;
display: block; display: block;
margin-top: 1em; margin-top: 1em;
padding: 1em; padding: 1em;
border: 0; border: 0;
width: 100%; width: 100%;
&:hover{
&:hover {
background: $lightblue; background: $lightblue;
} }
} }
} }
#fos_user_profile_form{ #fos_user_profile_form {
div{ div {
margin: 0.5em auto; margin: 0.5em auto;
} }
} }
#bodyland{ #bodyland {
.container{ .container {
min-height: 1000px; min-height: 100vh;
} }
} }
#menu_button{
z-index: 10;
position: absolute;
right: 1em;
top: -2px;
font-size: 1rem;
}

View File

@ -1,25 +1,25 @@
@media all and(max-width: 1200px) { @media all and(max-width: 1200px) {
nav{ nav {
min-width: auto; min-width: auto;
} }
html,body{ html, body {
font-size: 1.2rem; font-size: 1.2rem;
} }
.bg-shader { .bg-shader {
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
} }
.product-values-block { .product-values-block {
padding: 1em; padding: 1em;
} }
#homepage{ #homepage {
.main-section{ .main-section {
padding: 2rem; padding: 2rem;
} }
.btn{
display:block; .btn {
display: block;
width: 100%; width: 100%;
font-size: 1.25em; font-size: 1.25em;
} }
@ -28,9 +28,11 @@
.product-box { .product-box {
width: 100%; width: 100%;
} }
.product-button { .product-button {
min-width: calc(100% - 56px) min-width: calc(100% - 56px)
} }
.listing-products { .listing-products {
.btn, button { .btn, button {
@ -42,12 +44,104 @@
} }
} }
@media all and(max-width: 600px) { @media all and(max-width: 1200px) {
html,body{
font-size: 1.5rem; #bodyland {
.container {
min-height: 100vh;
width: 80vw;
}
} }
.category-listing{ #menu-dashboard {
width: calc(100% - 2rem); font-size: 1rem;
width: 19vw;
min-width: 200px;
.nav {
min-width: 200px;
}
}
form {
margin-top: 3em;
select {
width: 100%;
margin: 1em 0;
}
+ ul {
margin-top: 1em;
list-style-type: none;
a {
display: block;
.fa {
margin-right: 1em;
}
}
}
}
}
@media all and(max-width: 600px) {
html, body {
font-size: 1rem;
}
#menu-dashboard .nav .logo-home.btn-default {
height: auto;
font-size: 2em;
}
#menu-dashboard {
width: 100vw;
visibility: hidden;
&.shown {
visibility: visible;
}
.nav {
min-width: 200px;
height: 100vh;
overflow: auto;
a {
font-size: 2rem;
}
}
}
.category-listing {
width: calc(100vw - 9rem);
height: 25vh;
min-height: auto;
float: left;
clear: both;
overflow: auto;
}
.sellings, .client-now {
input {
width: 100%;
font-size: 1.5rem;
padding: 0.5rem;
}
}
.big-footer {
font-size: 1rem;
}
#caisse-now .product-box {
margin-bottom: 0.25rem;
}
#caisse-now .listing-products button {
padding: 0.5rem 1rem;
.express-button {
padding: 0.5rem 1rem;
}
} }
} }

View File

@ -10,448 +10,461 @@ require('bootstrap-sass');
$(document).ready(function () { $(document).ready(function () {
$('[data-toggle="popover"]').popover(); $('[data-toggle="popover"]').popover();
$('#menu_button').on('click', function(){
$('#menu-dashboard').toggleClass('shown');
})
}); });
require('./caisseCtrl');
require('./dashboard');
var PrevisionnelCtrl = require('./previsionnel');
console.log('hello console for main.js'); console.log('hello console for main.js');
var stuff = ['initialstuff']; var stuff = ['initialstuff'];
// TODO split controllers in other files // TODO split controllers in other files
angular angular
.module('caisse', []) .module('caisse', [])
.controller('CaisseCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { .controller('CaisseCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.productsFromDB = []; // loaded products $scope.productsFromDB = []; // loaded products
$scope.categories = []; // product categories $scope.categories = []; // product categories
$scope.sellingComment = "un gens"; // comment about the client or the current selling $scope.sellingComment = "un gens"; // comment about the client or the current selling
$scope.initLoadDone = false; // becames true after first init of product loading $scope.initLoadDone = false; // becames true after first init of product loading
$scope.recentSellings = []; $scope.recentSellings = [];
$scope.lesParams = {}; $scope.lesParams = {};
$scope.countProductsSoldForActiveFestival = {}; $scope.countProductsSoldForActiveFestival = {};
$scope.paidAmount = 0; $scope.paidAmount = 0;
$scope.expressSelling = true; $scope.expressSelling = true;
$scope.pausedSelling = []; $scope.pausedSelling = [];
$scope.show_config = { $scope.show_config = {
stock_count: false, stock_count: false,
sold: true, sold : true,
}; };
$scope.activeItemsSold = []; // list of products ID to sell $scope.activeItemsSold = []; // list of products ID to sell
$scope.activeSelling = []; // list of products to sell $scope.activeSelling = []; // list of products to sell
$scope.activeSellingFiltered = []; // list of products to sell $scope.activeSellingFiltered = []; // list of products to sell
$scope.activeFestival = { // an event where selling take place $scope.activeFestival = { // an event where selling take place
id: null, id : null,
name: "le festival", name : "le festival",
dateCreation: new Date(), dateCreation : new Date(),
chiffreAffaire: 0, chiffreAffaire: 0,
clientsCount: 0, clientsCount : 0,
commentaire: "" commentaire : ""
}; };
/**
* set the right paid amount
*/
$scope.setRightAmountPaid = function () {
// debugger;
$scope.paidAmount += $scope.sumOfList($scope.activeSelling);
}
/**
* deduplicate the active selling items in the view,
* show a count for each of them when there are more than one
*/
$scope.refreshDeduplicateSellings = () => {
let soldObjectsIdsCount = {}
$scope.activeSellingFiltered = {};
/** $scope.activeSelling.forEach(elem => {
* set the right paid amount let groupId = elem.id;
*/ let group = soldObjectsIdsCount[groupId];
$scope.setRightAmountPaid = function () { if (group) { // sort elements by the product id corresponding
// debugger; group.count++;
$scope.paidAmount += $scope.sumOfList($scope.activeSelling); group.totalPrice += (elem.price * 1);
} group.sellings.push(elem);
/** } else {
* deduplicate the active selling items in the view,
* show a count for each of them when there are more than one
*/
$scope.refreshDeduplicateSellings = () => {
let soldObjectsIdsCount = {}
$scope.activeSellingFiltered = {};
$scope.activeSelling.forEach(elem => { soldObjectsIdsCount[groupId] = {
let groupId = elem.id; groupId : groupId,
let group = soldObjectsIdsCount[groupId]; count : 1,
if (group) { // sort elements by the product id corresponding name : elem.name,
group.count++; unitPrice : elem.price * 1,
group.totalPrice += (elem.price * 1); totalPrice: elem.price * 1,
group.sellings.push(elem); sellings : [elem],
} else { }
}
});
$scope.activeSellingFiltered = soldObjectsIdsCount;
soldObjectsIdsCount[groupId] = { }
groupId: groupId,
count: 1,
name: elem.name,
unitPrice: elem.price * 1,
totalPrice: elem.price * 1,
sellings: [elem],
}
}
});
$scope.activeSellingFiltered = soldObjectsIdsCount;
} /**
* get the sum of products prices
* @param list
* @returns {number}
*/
$scope.sumOfList = function (list) {
let counter = 0;
for (let i = 0; i < list.length; i++) {
counter += list[i].price * 1;
}
return counter;
};
/**
* sum of current selling list prices
* @returns {number}
* @constructor
*/
$scope.CurrentSellingTotal = function () {
return $scope.sumOfList($scope.activeSelling);
};
/** $scope.categoriesVisibleCount = function () {
* get the sum of products prices let count = 0;
* @param list $scope.categories.forEach(function (elem) {
* @returns {number} elem.hidden ? count++ : "";
*/ });
$scope.sumOfList = function (list) { return count;
let counter = 0; }
for (let i = 0; i < list.length; i++) {
counter += list[i].price;
}
return counter;
};
/**
* sum of current selling list prices
* @returns {number}
* @constructor
*/
$scope.CurrentSellingTotal = function () {
return $scope.sumOfList($scope.activeSelling);
};
$scope.regenActiveSellingIds = function () { $scope.regenActiveSellingIds = function () {
$scope.activeItemsSold = []; $scope.activeItemsSold = [];
$scope.paidAmount = 0; $scope.paidAmount = 0;
for (let obj in $scope.activeSelling) { for (let obj in $scope.activeSelling) {
$scope.activeItemsSold.push(obj.id); $scope.activeItemsSold.push(obj.id);
} }
$scope.paidAmount += $scope.sumOfList($scope.activeSelling); $scope.paidAmount += $scope.sumOfList($scope.activeSelling);
}; };
$scope.stuff = stuff; $scope.stuff = stuff;
$scope.setActiveSelling = function (selling) { $scope.setActiveSelling = function (selling) {
$scope.activeSelling = selling; $scope.activeSelling = selling;
}; };
$scope.pauseSelling = function (selling) { $scope.pauseSelling = function (selling) {
$scope.pausedSelling.push(selling); $scope.pausedSelling.push(selling);
}; };
/** /**
* add to current sell list * add to current sell list
* @param product * @param product
*/ */
$scope.addProduct = function (product) { $scope.addProduct = function (product) {
product.stockCount--; product.stockCount--;
$scope.activeSelling.push(product); $scope.activeSelling.push(product);
$scope.activeItemsSold.push(product.id); $scope.activeItemsSold.push(product.id);
$scope.regenActiveSellingIds(); $scope.regenActiveSellingIds();
$scope.refreshDeduplicateSellings(); $scope.refreshDeduplicateSellings();
$scope.setRightAmountPaid(); $scope.setRightAmountPaid();
}; };
/** /**
* remove from current sell list * remove from current sell list
* @param product * @param product
*/ */
$scope.removeProduct = function (product, index) { $scope.removeProduct = function (product, index) {
product.stockCount++; product.stockCount++;
$scope.activeSelling.splice($index, 1); $scope.activeSelling.splice($index, 1);
$scope.regenActiveSellingIds(); $scope.regenActiveSellingIds();
$scope.refreshDeduplicateSellings(); $scope.refreshDeduplicateSellings();
}; };
/** /**
* remove all products of a certain group id in the active Selling * remove all products of a certain group id in the active Selling
* @param productId * @param productId
* @returns {*} * @returns {*}
*/ */
$scope.removeGroupeProducts = function (productId) { $scope.removeGroupeProducts = function (productId) {
console.log("##### removeGroupeProducts", productId); console.log("##### removeGroupeProducts", productId);
console.log("$scope.activeSelling", $scope.activeSelling); console.log("$scope.activeSelling", $scope.activeSelling);
$scope.activeSelling = $scope.activeSelling.filter(elem => elem.id != productId) $scope.activeSelling = $scope.activeSelling.filter(elem => elem.id != productId)
console.log("$scope.activeSelling", $scope.activeSelling); console.log("$scope.activeSelling", $scope.activeSelling);
$scope.regenActiveSellingIds(); $scope.regenActiveSellingIds();
$scope.refreshDeduplicateSellings(); $scope.refreshDeduplicateSellings();
} }
$scope.removeAll = function () { $scope.removeAll = function () {
$scope.activeSelling = []; $scope.activeSelling = [];
$scope.regenActiveSellingIds(); $scope.regenActiveSellingIds();
$scope.refreshDeduplicateSellings(); $scope.refreshDeduplicateSellings();
}; };
$scope.pauseSelling = function () { $scope.pauseSelling = function () {
$scope.pausedSelling.push(angular.copy($scope.activeSelling)); $scope.pausedSelling.push(angular.copy($scope.activeSelling));
$scope.activeSelling = []; $scope.activeSelling = [];
}; };
$scope.setBackPausedSelling = function (sellingList, index) { $scope.setBackPausedSelling = function (sellingList, index) {
$scope.activeSelling = angular.copy(sellingList); $scope.activeSelling = angular.copy(sellingList);
$scope.pausedSelling.splice(index, 1); $scope.pausedSelling.splice(index, 1);
}; };
$scope.clearSellingComment = function () { $scope.clearSellingComment = function () {
$scope.sellingComment = ''; $scope.sellingComment = '';
document.querySelector('.client-now input').focus(); document.querySelector('.client-now input').focus();
}; };
$scope.clearCurrentSelling = function () { $scope.clearCurrentSelling = function () {
$scope.paidAmount = 0; $scope.paidAmount = 0;
$scope.clearSellingComment(); $scope.clearSellingComment();
$scope.activeSelling = []; $scope.activeSelling = [];
$scope.removeAll(); $scope.removeAll();
}; };
// http related calls // http related calls
$scope.fetchProductsFromDB = function () { $scope.fetchProductsFromDB = function () {
console.log('fetch products...'); console.log('fetch products...');
$http.get('get-my-products').then((rep) => { $http.get('get-my-products').then((rep) => {
console.log('ok', rep); console.log('ok', rep);
customCategories = []; customCategories = [];
for (let c of rep.data.categories) { for (let c of rep.data.categories) {
c.hidden = false; c.hidden = false;
customCategories.push(c); customCategories.push(c);
} }
console.log('customCategories', customCategories); console.log('customCategories', customCategories);
$scope.categories = customCategories; $scope.categories = customCategories;
$scope.productsFromDB = customCategories; $scope.productsFromDB = customCategories;
// $scope.recentSellings = rep.data.history; // $scope.recentSellings = rep.data.history;
// festoche // festoche
$scope.activeFestival.id = rep.data.lastFestival.id; $scope.activeFestival.id = rep.data.lastFestival.id;
$scope.activeFestival.name = rep.data.lastFestival.name; $scope.activeFestival.name = rep.data.lastFestival.name;
$scope.activeFestival.dateCreation = rep.data.lastFestival.dateCreation; $scope.activeFestival.dateCreation = rep.data.lastFestival.dateCreation;
$scope.activeFestival.commentaire = rep.data.lastFestival.commentaire; $scope.activeFestival.commentaire = rep.data.lastFestival.commentaire;
$scope.activeFestival.chiffreAffaire = rep.data.lastFestival.chiffreAffaire; $scope.activeFestival.chiffreAffaire = rep.data.lastFestival.chiffreAffaire;
$scope.activeFestival.fondDeCaisseAvant = rep.data.lastFestival.fondDeCaisseAvant; $scope.activeFestival.fondDeCaisseAvant = rep.data.lastFestival.fondDeCaisseAvant;
$scope.activeFestival.fondDeCaisseApres = rep.data.lastFestival.fondDeCaisseApres; $scope.activeFestival.fondDeCaisseApres = rep.data.lastFestival.fondDeCaisseApres;
$scope.activeFestival.clientsCount = rep.data.lastFestival.clientsCount; $scope.activeFestival.clientsCount = rep.data.lastFestival.clientsCount;
// stat count for items // stat count for items
$scope.countProductsSoldForActiveFestival = rep.data.lastFestival.sold; $scope.countProductsSoldForActiveFestival = rep.data.lastFestival.sold;
console.log(' $scope.countProductsSoldForActiveFestival', $scope.countProductsSoldForActiveFestival); console.log(' $scope.countProductsSoldForActiveFestival', $scope.countProductsSoldForActiveFestival);
//done //done
$scope.initLoadDone = true; $scope.initLoadDone = true;
}, (err) => { }, (err) => {
console.log(err); console.log(err);
$scope.initLoadDone = true; $scope.initLoadDone = true;
}); });
}; };
/** /**
* sell one product, assuming the client has the right amount of money * sell one product, assuming the client has the right amount of money
* @param product * @param product
*/ */
$scope.expressSell = function (product) { $scope.expressSell = function (product) {
$scope.addProduct(product); $scope.addProduct(product);
$scope.sendForm(); $scope.sendForm();
}; };
$scope.recentId = 0; $scope.recentId = 0;
$scope.logger = function (stuff) { $scope.logger = function (stuff) {
console.log('logger', stuff); console.log('logger', stuff);
}; };
$scope.sendForm = function () { $scope.sendForm = function () {
console.log('$scope.sellingComment', $scope.sellingComment); console.log('$scope.sellingComment', $scope.sellingComment);
console.log("$scope.activeSelling", $scope.activeSelling); console.log("$scope.activeSelling", $scope.activeSelling);
let lesParams = { let lesParams = {
paidByClient: $scope.paidAmount, paidByClient : $scope.paidAmount,
sellingComment: $scope.sellingComment, sellingComment: $scope.sellingComment,
activeSelling: $scope.activeSelling, activeSelling : $scope.activeSelling,
activeFestival: $scope.activeFestival activeFestival: $scope.activeFestival
}; };
$scope.recentSellings.push({ $scope.recentSellings.push({
id: $scope.recentId++, id : $scope.recentId++,
amount: $scope.CurrentSellingTotal(), amount : $scope.CurrentSellingTotal(),
paidAmount: $scope.paidAmount, paidAmount: $scope.paidAmount,
products: products :
angular angular
.copy($scope.activeSelling) .copy($scope.activeSelling)
}); });
console.log('$scope.recentSellings', $scope.recentSellings); console.log('$scope.recentSellings', $scope.recentSellings);
$scope.lesParams = lesParams; $scope.lesParams = lesParams;
$http({ $http({
method: 'POST', method : 'POST',
url: 'add-selling', url : 'add-selling',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
data: lesParams // pass in data as strings data : lesParams // pass in data as strings
}).then(function (rep) { }).then(function (rep) {
$scope.clearCurrentSelling(); $scope.clearCurrentSelling();
// if successful, bind success message to message // if successful, bind success message to message
$scope.successMessage = rep.data.message; $scope.successMessage = rep.data.message;
$scope.activeFestival.chiffreAffaire = rep.data.newChiffreAffaire; $scope.activeFestival.chiffreAffaire = rep.data.newChiffreAffaire;
$scope.activeFestival.clientsCount = rep.data.clientsCount; $scope.activeFestival.clientsCount = rep.data.clientsCount;
$scope.countProductsSoldForActiveFestival = rep.data.activeFestival.sold; $scope.countProductsSoldForActiveFestival = rep.data.activeFestival.sold;
$scope.showTemporaryMessage(); $scope.showTemporaryMessage();
console.log(rep); console.log(rep);
if (!rep.success) { if (!rep.success) {
// if not successful, bind errors to error variables // if not successful, bind errors to error variables
$scope.errors = rep.errors; $scope.errors = rep.errors;
} }
}, function (rep) { }, function (rep) {
console.log('nope! ', rep.data); console.log('nope! ', rep.data);
}) })
; ;
}; };
$scope.sellingOk = false; $scope.sellingOk = false;
$scope.tempMessage = {}; $scope.tempMessage = {};
$scope.showTemporaryMessage = function () { $scope.showTemporaryMessage = function () {
if ($scope.sellingOk) { if ($scope.sellingOk) {
return; return;
} }
$scope.sellingOk = true; $scope.sellingOk = true;
$timeout.cancel($scope.tempMessage); $timeout.cancel($scope.tempMessage);
$scope.tempMessage = $timeout(function () { $scope.tempMessage = $timeout(function () {
$scope.sellingOk = false; $scope.sellingOk = false;
}, 2000) }, 2000)
}; };
$scope.init = (function () { $scope.init = (function () {
$scope.fetchProductsFromDB(); $scope.fetchProductsFromDB();
})(); })();
}]) }])
.controller('previsionnelCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { .controller('previsionnelCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.config = { $scope.config = {
initialLoadingDone: false, initialLoadingDone : false,
loading: false, loading : false,
lines: 24, lines : 24,
debounceTime: 300, // miliseconds to wait before updating model and saving changes debounceTime : 300, // miliseconds to wait before updating model and saving changes
/** /**
* expenses kind of the user * expenses kind of the user
*/ */
disponibility: 5000, disponibility : 5000,
averageMonthlyEarnings: 600, averageMonthlyEarnings: 600,
warningThershold: 2000, warningThershold : 2000,
showDelays: false, showDelays : false,
showRepeats: false, showRepeats : false,
monthsBeforeNoMoney: null, monthsBeforeNoMoney : null,
}; };
let exampleExpenses = [ let exampleExpenses = [
{name: "appart", amount: 800, delay: 0, repeat: $scope.config.lines, enabled: true}, {name: "appart", amount: 800, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "assurance voiture", amount: 50, delay: 0, repeat: $scope.config.lines, enabled: true}, {name: "assurance voiture", amount: 50, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "internet", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true}, {name: "internet", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "elec", amount: 100, delay: 0, repeat: $scope.config.lines, enabled: true}, {name: "elec", amount: 100, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "chat", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true}, {name: "chat", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "transports", amount: 70, delay: 0, repeat: $scope.config.lines, enabled: false}, {name: "transports", amount: 70, delay: 0, repeat: $scope.config.lines, enabled: false},
]; ];
// $scope.expenses=[]; // $scope.expenses=[];
$scope.expenses = exampleExpenses; $scope.expenses = exampleExpenses;
/** /**
* sum of all monthly expenses, ignoring delay * sum of all monthly expenses, ignoring delay
* @returns {number} * @returns {number}
*/ */
$scope.sumMonthlyExpenses = () => { $scope.sumMonthlyExpenses = () => {
let sum = 0; let sum = 0;
$scope.expenses.forEach((elem) => { $scope.expenses.forEach((elem) => {
if (elem.enabled) { if (elem.enabled) {
sum += elem.amount; sum += elem.amount;
} }
}) })
return sum; return sum;
}; };
$scope.previsionTable = []; $scope.previsionTable = [];
$scope.calculatePrevisionTable = () => { $scope.calculatePrevisionTable = () => {
let turns = $scope.config.lines; let turns = $scope.config.lines;
let monthly = $scope.sumMonthlyExpenses(); let monthly = $scope.sumMonthlyExpenses();
let available = $scope.config.disponibility; let available = $scope.config.disponibility;
let previsionTable = []; let previsionTable = [];
let changedNoMoneyConfig = false; let changedNoMoneyConfig = false;
$scope.config.monthsBeforeNoMoney = null; $scope.config.monthsBeforeNoMoney = null;
for (let i = 0; i <= turns; i++) { for (let i = 0; i <= turns; i++) {
// TODO take in account delays in expenses // TODO take in account delays in expenses
available = available - monthly + $scope.config.averageMonthlyEarnings; available = available - monthly + $scope.config.averageMonthlyEarnings;
let newLine = { let newLine = {
expense: monthly, expense : monthly,
available: available, available: available,
}; };
if (available <= 0 && !changedNoMoneyConfig) { if (available <= 0 && !changedNoMoneyConfig) {
$scope.config.monthsBeforeNoMoney = i; $scope.config.monthsBeforeNoMoney = i;
changedNoMoneyConfig = true; changedNoMoneyConfig = true;
} }
previsionTable.push(newLine); previsionTable.push(newLine);
} }
$scope.previsionTable = previsionTable; $scope.previsionTable = previsionTable;
$scope.makeGraphPointsOfPrevisionTable(previsionTable); $scope.makeGraphPointsOfPrevisionTable(previsionTable);
return previsionTable; return previsionTable;
}; };
$scope.graphPointsPrevision = []; $scope.graphPointsPrevision = [];
$scope.makeGraphPointsOfPrevisionTable = (previsionTable) => { $scope.makeGraphPointsOfPrevisionTable = (previsionTable) => {
console.log("previsionTable", previsionTable); console.log("previsionTable", previsionTable);
$scope.graphPointsPrevision = []; $scope.graphPointsPrevision = [];
for (let i = 0; i < previsionTable.length; i++) { for (let i = 0; i < previsionTable.length; i++) {
$scope.graphPointsPrevision.push({ $scope.graphPointsPrevision.push({
label: previsionTable[i].available + " euros restants dans " + i + " mois", label: previsionTable[i].available + " euros restants dans " + i + " mois",
y: previsionTable[i].available, y : previsionTable[i].available,
x: i, x : i,
}) })
} }
} }
$scope.updateconf = (rep) => { $scope.updateconf = (rep) => {
// update view calculs // update view calculs
$scope.calculatePrevisionTable(); $scope.calculatePrevisionTable();
$scope.updateCanevas() $scope.updateCanevas()
// flags // flags
$scope.config.loading = false; $scope.config.loading = false;
$scope.config.initialLoadingDone = true; $scope.config.initialLoadingDone = true;
$scope.config.disponibility = rep.data.disponibility; $scope.config.disponibility = rep.data.disponibility;
$scope.config.averageMonthlyEarnings = rep.data.averageMonthlyEarnings; $scope.config.averageMonthlyEarnings = rep.data.averageMonthlyEarnings;
// default data when user has nothing saved // default data when user has nothing saved
console.log('rep.data.expenses.length', rep.data.expenses.length) console.log('rep.data.expenses.length', rep.data.expenses.length)
if (!rep.data.expenses.length) { if (!rep.data.expenses.length) {
$scope.expenses = exampleExpenses; $scope.expenses = exampleExpenses;
} else { } else {
$scope.expenses = rep.data.expenses; $scope.expenses = rep.data.expenses;
} }
}; };
// http related calls // http related calls
$scope.fetchExpenses = () => { $scope.fetchExpenses = () => {
console.log('fetch expenses...'); console.log('fetch expenses...');
$scope.config.loading = true; $scope.config.loading = true;
$http.get('get-my-expenses').then((rep) => { $http.get('get-my-expenses').then((rep) => {
console.log('get-my-expenses', rep.data.expenses); console.log('get-my-expenses', rep.data.expenses);
$scope.updateconf(rep) $scope.updateconf(rep)
}, },
$scope.manageError) $scope.manageError)
}; };
$scope.save = function () { $scope.save = function () {
if ($scope.config.loading) { if ($scope.config.loading) {
console.log('already saving'); console.log('already saving');
return; return;
} }
console.log('update expenses...'); console.log('update expenses...');
$scope.config.loading = true; $scope.config.loading = true;
$http.post('save-my-expenses', { $http.post('save-my-expenses', {
expenses: $scope.expenses, expenses: $scope.expenses,
config: $scope.config config : $scope.config
}) })
.then((rep) => { .then((rep) => {
console.log('save-my-expenses', rep); console.log('save-my-expenses', rep);
$scope.updateconf(rep) $scope.updateconf(rep)
}, },
$scope.manageError) $scope.manageError)
}; };
$scope.addExpense = function () { $scope.addExpense = function () {
$scope.expenses.push({ $scope.expenses.push({
name: "", name : "",
repeat: 0, repeat: 0,
delay: 0, delay : 0,
amount: 0, amount: 0,
}) })
}; };
$scope.init = function () { $scope.init = function () {
$scope.fetchExpenses(); $scope.fetchExpenses();
}; };
$scope.manageError = (error) => { $scope.manageError = (error) => {
console.error(error); console.error(error);
$scope.config.loading = false; $scope.config.loading = false;
} };
$scope.updateCanevas = function () { $scope.updateCanevas = function () {
var dataPoints = $scope.graphPointsPrevision; var dataPoints = $scope.graphPointsPrevision;
var chartContainer = new CanvasJS.Chart("simulationPrevision", { var chartContainer = new CanvasJS.Chart("simulationPrevision", {
title: { title: {
text: "Euros disponibles dans le temps" text: "Euros disponibles dans le temps"
}, },
// animationEnabled: true, // animationEnabled: true,
data: [ data : [
{ {
// Change type to "doughnut", "line", "splineArea", etc. // Change type to "doughnut", "line", "splineArea", etc.
type: "splineArea", type : "splineArea",
dataPoints: dataPoints dataPoints: dataPoints
} }
] ]
}); });
chartContainer.render(); chartContainer.render();
} };
$scope.init(); $scope.init();
}]); }]);

View File

@ -0,0 +1,163 @@
export var PrevisionnelCtrl = function ($scope, $http, $timeout) {
$scope.config = {
initialLoadingDone : false,
loading : false,
lines : 24,
debounceTime : 300, // miliseconds to wait before updating model and saving changes
/**
* expenses kind of the user
*/
disponibility : 5000,
averageMonthlyEarnings: 600,
warningThershold : 2000,
showDelays : false,
showRepeats : false,
monthsBeforeNoMoney : null,
};
let exampleExpenses = [
{name: "appart", amount: 800, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "assurance voiture", amount: 50, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "internet", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "elec", amount: 100, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "chat", amount: 20, delay: 0, repeat: $scope.config.lines, enabled: true},
{name: "transports", amount: 70, delay: 0, repeat: $scope.config.lines, enabled: false},
];
// $scope.expenses=[];
$scope.expenses = exampleExpenses;
/**
* sum of all monthly expenses, ignoring delay
* @returns {number}
*/
$scope.sumMonthlyExpenses = () => {
let sum = 0;
$scope.expenses.forEach((elem) => {
if (elem.enabled) {
sum += elem.amount;
}
})
return sum;
};
$scope.previsionTable = [];
$scope.calculatePrevisionTable = () => {
let turns = $scope.config.lines;
let monthly = $scope.sumMonthlyExpenses();
let available = $scope.config.disponibility;
let previsionTable = [];
let changedNoMoneyConfig = false;
$scope.config.monthsBeforeNoMoney = null;
for (let i = 0; i <= turns; i++) {
// TODO take in account delays in expenses
available = available - monthly + $scope.config.averageMonthlyEarnings;
let newLine = {
expense : monthly,
available: available,
};
if (available <= 0 && !changedNoMoneyConfig) {
$scope.config.monthsBeforeNoMoney = i;
changedNoMoneyConfig = true;
}
previsionTable.push(newLine);
}
$scope.previsionTable = previsionTable;
$scope.makeGraphPointsOfPrevisionTable(previsionTable);
return previsionTable;
};
$scope.graphPointsPrevision = [];
$scope.makeGraphPointsOfPrevisionTable = (previsionTable) => {
console.log("previsionTable", previsionTable);
$scope.graphPointsPrevision = [];
for (let i = 0; i < previsionTable.length; i++) {
$scope.graphPointsPrevision.push({
label: previsionTable[i].available + " euros restants dans " + i + " mois",
y : previsionTable[i].available,
x : i,
})
}
}
$scope.updateconf = (rep) => {
// update view calculs
$scope.calculatePrevisionTable();
$scope.updateCanevas()
// flags
$scope.config.loading = false;
$scope.config.initialLoadingDone = true;
$scope.config.disponibility = rep.data.disponibility;
$scope.config.averageMonthlyEarnings = rep.data.averageMonthlyEarnings;
// default data when user has nothing saved
console.log('rep.data.expenses.length', rep.data.expenses.length)
if (!rep.data.expenses.length) {
$scope.expenses = exampleExpenses;
} else {
$scope.expenses = rep.data.expenses;
}
};
// http related calls
$scope.fetchExpenses = () => {
console.log('fetch expenses...');
$scope.config.loading = true;
$http.get('get-my-expenses').then((rep) => {
console.log('get-my-expenses', rep.data.expenses);
$scope.updateconf(rep)
},
$scope.manageError)
};
$scope.save = function () {
if ($scope.config.loading) {
console.log('already saving');
return;
}
console.log('update expenses...');
$scope.config.loading = true;
$http.post('save-my-expenses', {
expenses: $scope.expenses,
config : $scope.config
})
.then((rep) => {
console.log('save-my-expenses', rep);
$scope.updateconf(rep)
},
$scope.manageError)
};
$scope.addExpense = function () {
$scope.expenses.push({
name : "",
repeat: 0,
delay : 0,
amount: 0,
})
};
$scope.init = function () {
$scope.fetchExpenses();
};
$scope.manageError = (error) => {
console.error(error);
$scope.config.loading = false;
}
$scope.updateCanevas = function () {
var dataPoints = $scope.graphPointsPrevision;
var chartContainer = new CanvasJS.Chart("simulationPrevision", {
title: {
text: "Euros disponibles dans le temps"
},
// animationEnabled: true,
data : [
{
// Change type to "doughnut", "line", "splineArea", etc.
type : "splineArea",
dataPoints: dataPoints
}
]
});
chartContainer.render();
}
$scope.init();
};