Souke/producer/views/order/order.php

<?php

/** 
Copyright La boîte à pain (2018) 

contact@laboiteapain.net

Ce logiciel est un programme informatique servant à aider les producteurs 
à distribuer leur production en circuits courts. 

Ce logiciel est régi par la licence CeCILL soumise au droit français et
respectant les principes de diffusion des logiciels libres. Vous pouvez
utiliser, modifier et/ou redistribuer ce programme sous les conditions
de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
sur le site "http://www.cecill.info".

En contrepartie de l'accessibilité au code source et des droits de copie,
de modification et de redistribution accordés par cette licence, il n'est
offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
seule une responsabilité restreinte pèse sur l'auteur du programme,  le
titulaire des droits patrimoniaux et les concédants successifs.

A cet égard  l'attention de l'utilisateur est attirée sur les risques
associés au chargement,  à l'utilisation,  à la modification et/ou au
développement et à la reproduction du logiciel par l'utilisateur étant 
donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
manipuler et qui le réserve donc à des développeurs et des professionnels
avertis possédant  des  connaissances  informatiques approfondies.  Les
utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
logiciel à leurs besoins dans des conditions permettant d'assurer la
sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 

Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/

\producer\assets\VuejsOrderOrderAsset::register($this);

$this->setTitle('Commander') ;

?>

<div id="app-order-order" :class="{'loaded': !loadingInit}">
    <?php if(isset($order)): ?>
        <span id="order-distribution-date"><?= $order->distribution->date; ?></span> 
    <?php endif; ?>
    <div v-if="orderSuccess" id="order-success">
        <div class="alert alert-success">
            <span class="glyphicon glyphicon-ok glyphicon-big"></span>             
            <div class="content">
                <h3>Votre commande a bien été prise en compte</h3>
                <a href="<?= Yii::$app->urlManagerProducer->createUrl(['order/history']) ?>" class="btn btn-default">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    Voir toutes mes commandes
                </a>
            </div>
            <div class="clr"></div>
        </div>
        <div class="alert alert-info">
            <span class="glyphicon glyphicon-list-alt glyphicon-big"></span>             
            <div class="content">
                <h3>Récapitulatif de votre commande</h3>
                <ul>
                    <li><span class="glyphicon glyphicon-time"></span> {{ dateFormat }}</li>
                    <li><span class="glyphicon glyphicon-map-marker"></span> {{ pointSaleActive.name }} <span class="locality" v-if="pointSaleActive.locality.length > 0">à {{ pointSaleActive.locality }}</span></li>
                    <li><span class="glyphicon glyphicon-th-list"></span> {{ countProductOrdered() }} produits</li>
                    <li><span class="glyphicon glyphicon-chevron-right"></span> {{ priceTotal(true) }}</li>
                </ul>                
            </div>
            <div class="clr"></div>
        </div>        
    </div>
    <div v-else>
        <div :class="(producer != null && producer.order_infos.length) ? 'col-md-9' : 'col-md-12'">
            <div id="steps">
                <ul>
                    <li id="step-date" :class="'col-md-3 '+((step == 'date') ? 'active' : '')">
                        <div class="info-step" v-if="dateFormat">
                            {{ dateFormat }}
                        </div>
                        <button @click="changeStep('date')" :class="'btn '+ (step == 'date' ? 'btn-primary' : 'btn-default')">
                            <span class="button-content"><span class="glyphicon glyphicon-time"></span> Date</span></span>
                        </button>
                    </li>
                    <li id="step-point-sale" :class="'col-md-3 '+((step == 'point-sale') ? 'active ' : '')">
                        <div class="info-step" v-if="pointSaleActive">
                            {{ pointSaleActive.name }}
                        </div>
                        <button @click="changeStep('point-sale')" :class="'btn '+ (step == 'point-sale' ? 'btn-primary' : 'btn-default')" :disabled="step == 'date'">
                            <span class="button-content"><span class="glyphicon glyphicon-map-marker"></span> Points de vente</span>
                        </button>
                    </li>
                    <li id="step-products" :class="'col-md-3 '+((step == 'products') ? 'active ' : '')">
                        <div class="info-step" v-if="oneProductOrdered()">
                            {{ countProductOrdered() }} produit{{ (countProductOrdered() > 1) ? 's' : '' }}
                        </div>
                        <button @click="changeStep('products')" :class="'btn '+ (step == 'products' ? 'btn-primary' : 'btn-default')" :disabled="step == 'date' || step == 'point-sale'">
                            <span class="button-content"><span class="glyphicon glyphicon-th-list"></span> Produits</span>
                        </button>
                    </li>
                    <li id="step-payment" :class="'col-md-3 '+((step == 'payment') ? 'active' : '')">
                        <button @click="changeStep('payment')" :class="'btn '+ (step == 'payment' ? 'btn-primary' : 'btn-default')" :disabled="step == 'date' || step == 'point-sale' || step == 'products'">
                            <span class="button-content"><span class="glyphicon glyphicon-ok"></span> Confirmation</span>
                        </button>
                    </li>
                </ul>
                <div class="clr"></div>
            </div>
            <div class="content">
                <transition name="slide">
                    <div id="content-step-date" v-if="step == 'date'">
                            <div id="legend">
                                <div><span id="distribution-date-color"></span> Prochains jours de distribution</div>
                                <div><span id="order-date-color"></span> Vos commandes déjà enregistrées</div>
                            </div>
                            <div id="calendar">
                                <v-calendar
                                    is-inline
                                    is-double-paned
                                    is-expanded
                                    v-model="date"
                                    mode="single"
                                    :formats="calendar.formats"
                                    :theme-styles="calendar.themeStyles"
                                    :attributes="calendar.attrs"
                                    :available-dates="calendar.availableDates"
                                    @dayclick='dayClick'>
                                ></v-calendar> 
                            </div>
                    </div>
                </transition>
                <transition name="slide">
                    <div id="content-step-point-sale" v-if="step == 'point-sale'">
                        <div v-if="loading">
                            Chargement ...
                        </div>
                        <div v-else>
                            <table id="points-sale" class="table table-bordered" v-if="pointsSale.length">
                                <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Localité</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="pointSale in pointsSale" v-if="pointSale && pointSale.pointSaleDistribution.delivery" :class="(pointSaleActive && pointSale.id == pointSaleActive.id) ? 'selected' : ''">
                                        <td class="name">
                                            <span class="the-name">{{ pointSale.name }}</span>
                                            <div class="comment" v-if="pointSale.userPointSale">
                                                {{ pointSale.userPointSale.comment }}
                                            </div>
                                        </td>
                                        <td class="locality">{{ pointSale.locality }}</td>
                                        <td class="actions">
                                            <div :class="'form-group' + (pointSale.invalid_code ? ' has-error' : '')">
                                                <div class="input-group" v-if="pointSale.code.length > 0">
                                                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                                    <input v-model="pointsSaleCodes[pointSale.id]" type="password" placeholder="Code" class="form-control input-code" />
                                                </div>
                                            </div>
                                            <button class="btn btn-primary" @click="pointSaleClick" :data-code="pointSale.code.length > 0" :data-id-point-sale="pointSale.id">
                                                <span class="glyphicon glyphicon-map-marker"></span>
                                                Choisir 
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="alert alert-warning" v-else>
                                Aucun point de vente disponible pour ce jour de distribution.
                            </div>
                        </div>
                    </div>
                </transition>
                <transition name="slide">
                    <div id="content-step-products" v-if="step == 'products'">
                        <div v-if="products.length">
                            <table id="products" class="table table-bordered" >
                                <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Prix unitaire</th>
                                        <th>Quantité</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="product in products" v-if="product.productDistribution[0].active == 1">
                                        <td class="name">
                                            <span class="name">{{ product.name }}</span> 
                                            <span class="other">
                                                <span v-if="product.description.length">/</span> 
                                                <span class="description">{{ product.description }}</span> 
                                                <span v-if="product.weight">({{ product.weight }}g)</span>
                                            </span>
                                            <span v-if="product.quantity_form  == product.quantity_remaining && product.quantity_max > 0" class="label label-danger">
                                                Épuisé
                                            </span>
                                            <div class="recipe" v-if="product.recipe.length">{{ product.recipe }}</div>
                                        </td>
                                        <td class="price-unit">
                                            {{ formatPrice(product.price) }}
                                        </td>
                                        <td class="td-quantity">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default btn-moins" type="button" @click="productQuantityClick(product, -1)" :disabled="product.quantity_form == 0"><span class="glyphicon glyphicon-minus"></span></button>
                                                </span>
                                                <input type="text" v-model="product.quantity_form" class="form-control quantity" readonly="readonly" />
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default btn-plus" type="button" @click="productQuantityClick(product, 1)" :disabled="product.quantity_form == product.quantity_remaining && product.quantity_max > 0"><span class="glyphicon glyphicon-plus"></span></button>
                                                </span>
                                            </div>
                                        </td>
                                        <td class="price-total">
                                            {{ formatPrice(product.price * product.quantity_form) }}
                                        </td>
                                    </tr>
                                    <tr class="total">
                                        <td colspan="3"></td>
                                        <td class="price-total">{{ priceTotal(true) }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="block-actions">
                                <button class="btn btn-primary" @click="changeStep('payment')">Valider</button>
                            </div>
                        </div>
                        <div class="alert alert-warning" v-else>
                            Aucun produit disponible
                        </div>
                    </div>
                </transition>
                <transition name="slide">
                    <div id="content-step-payment" v-if="step == 'payment'">
                        <div class="comment">
                            <label for="order-comment">Commentaire</label>
                            <textarea id="order-comment" v-model="comment" class="form-control"></textarea>
                        </div>
                        <div class="credit">
                            <div v-if="producer.credit == 1 && pointSaleActive.credit == 1">
                                <span class="glyphicon glyphicon-chevron-right"></span> La commande va être réglée via votre Crédit ({{ formatPrice(credit) }}).
                                <div class="info">
                                    <span v-if="order == null || order.amount_paid == 0">{{ priceTotal(true) }} seront débités</span>
                                    <span v-else-if="order != null && order.amount_paid > 0 && order.amount_paid < priceTotal()">{{ formatPrice(priceTotal() - order.amount_paid) }} seront débités</span>
                                    <span v-else-if="order != null && order.amount_paid > priceTotal()">{{ formatPrice(order.amount_paid - priceTotal()) }} seront remboursés</span>
                                </div>
                            </div>
                            <div v-else>
                                <span class="glyphicon glyphicon-chevron-right"></span> La commande sera à régler sur place.
                            </div>
                        </div>
                        <div class="block-actions">
                            <button class="btn btn-primary" @click="confirmClick">Je confirme ma commande</button>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
        <div id="infos" class="col-md-3" v-if="producer != null && producer.order_infos.length">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Informations
                </div>
                <div class="panel-body">
                    {{ producer.order_infos }}
                </div>
            </div>
        </div>
    </div>
</div>