Untitled

<!DOCTYPE html>
<!-- saved from url=(0034)http://172.16.224.10/recursos/dwc/ -->
<html lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Ejercicio 6.1 - VUE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./index_files/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="./index_files/icon" rel="stylesheet">
    <link href="./index_files/main.css" rel="stylesheet">
    <meta name="description" content="Ejercicio de Javascript">
    <meta name="author" content="Juan Segura">
    <meta name="keywords" content="JavaScript, Ejercicio, HTML5, DAW">
</head>

<body>
    <div class="container" id="app">

        <header>
            <h1>Almacén central con Vue - ACME SL</h1>
        </header>

        <!-- Acciones sobre el almacén -->
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-4">
                <form>
                    <fieldset>
                        <legend>Nuevo producto</legend>
                        <!-- Aquí los inputs y botones del form -->
                        <!-- <div class="form-group hidden">
                            <label>Id:</label>
                            <input type="text" class="form-control"readonly>
                        </div> -->
                        <div class="form-group">
                            <label>Nombre:</label>
                            <input type="text" class="form-control" required="">
                        </div>
                        <!-- <div class="form-group hidden">
                            <label>Unidades:</label>
                            <input type="number" class="form-control" required min="0" value="0">
                        </div> -->
                        <div class="form-group">
                            <label>Precio/u.:</label>
                            <input type="number" class="form-control" required="" min="0" step="0.01">
                        </div>
                        <button type="submit" class="btn btn-default btn-primary">Añadir</button>
                        <button type="reset" class="btn btn-danger">Reset</button>
                    </fieldset>
                </form>
            </div>
        </div>

        <!-- Almacén de productos -->
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <table class="table table-striped table-hover">
                    <thead class="thead-dark bg-primary">
                        <tr>
                            <th>Id</th>
                            <th>Nombre</th>
                            <th>Uds.</th>
                            <th>Precio/u</th>
                            <th>Importe</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ product.id }}</td>
                            <td>{{ product.name }}</td>
                            <td>{{ product.units }}</td>
                            <td>{{ product.price }}</td>

                            <td>{{ (product.units*product.price).toString(2) }} €</td>
                            <td>
                                <button class="mdc-icon-button material-icons">expand_less</button>
                                <button class="mdc-icon-button material-icons">expand_more</button>
                                <button class="mdc-icon-button material-icons">delete</button>
                                <button class="mdc-icon-button material-icons">edit</button>
                            </td>
                        </tr>
                        <!-- Aquí insertaremos los productos-->
                    </tbody>
                </table>
                <p class="lead float-right">Importe total del almacén: <strong>2608.08 €</strong></p>
            </div>
        </div>

        <!-- Listados del almacén -->
        <div class="row hidden">
            <div class="col-sm-6 col-md-6 col-lg-6">
                <form>
                    <fieldset>
                        <legend>Listado de productos</legend>
                        <!-- Aquí los inputs y botones del form -->
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="opt-list" value="alf" required="">Listado alfabético
                            </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="opt-list" value="uds">Listado por
                                unidades (desc)
                            </label>
                        </div>
                        <button type="submit" class="btn btn-default btn-primary">Mostrar</button>
                        <button type="reset" class="btn btn-danger">Reset</button>
                    </fieldset>
                </form>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-6">
                <form>
                    <fieldset>
                        <legend>Productos bajo stock</legend>
                        <!-- Aquí los inputs y botones del form -->
                        <div class="form-group">
                            <label for="low-uds">Nº mín. de uds.:</label>
                            <input type="text" class="form-control" required="">
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="opt-low" value="alf" required="">Listado
                                alfabético
                            </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="opt-low" value="uds">Listado por
                                unidades
                            </label>
                        </div>
                        <button type="submit" class="btn btn-default btn-primary">Mostrar</button>
                        <button type="reset" class="btn btn-danger">Reset</button>
                    </fieldset>
                </form>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <p></p>
                    <ul></ul>
                </div>
            </div>

        </div>
    </div>
    <footer><small>Diseño Web en Entorno Cliente - Juan Segura</small></footer>

    <script src="./index_files/vue.js"></script>
    <script src="./index_files/product.class.js"></script>
    <script src="./index_files/store.class.js"></script>
    <script src="./index_files/main.js"></script>


</body></html>