simInvjs/index.html at master · rchavelas/simInvjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boaty inventory control ERP</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.min.js"></script>
    <!--gridjs-->
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.production.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
</head>

<body>
    <!-- Title -->
    <nav class="navbar navbar-dark bg-dark justify-content-center">
        <span class="navbar-brand mb-0 h1 px-2 "><b>Boaty</b> inventory control ERP</span>
    </nav>

    <div class="container-md"> <!-- Main container-->
        <div class="row"> <!-- Main row-->

            <!-- Graph -->
            <div class="col-md-8 ">

                <div class="row mt-2 mb-2 mx-1">

                    <div class="col-sm bg-ligth p-2 mb-1 bg-ligth rounded">
                        <div id="chartReport">
                            <canvas id="myChart" width="400" height="200"></canvas>
                        </div>
                    </div>

                </div>

                <div class="card-group mx-1">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Holding</h5>
                        <strong><p class="card-text" id="holdingCostBox">$</p></strong>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Backorder</h5>
                            <strong><p class="card-text" id="backorderCostBox">$</p></strong>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Ordering</h5>
                            <strong><p class="card-text" id="orderingCostBox">$</p></strong>
                        </div>
                    </div>
                    <div class="card bg-light">
                        <div class="card-body">
                            <h5 class="card-title">Total</h5>
                            <strong><p class="card-text" id="totalCostBox">$</p></strong>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4"> <!--Info Sidebar-->
                <!-- Day -->
                <div class="row mt-2 mx-1 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <p class="card-title">Current day:</p>
                            <p class="card-text" id="dayBox"></p>
                        </div>
                    </div>
                </div>
                <!--Order-->
                <div class="row my-1 mx-1 mb-3">
                    <div class="card">
                        <div class="card-body">
                            <p class="card-text">
                                <div class="form-group mb-2">
                                    <input type="text" class="form-control" id="orderInput" name="orderInput"
                                    placeholder="Amount to order this day" requiered minlength="1"
                                    maxlength="2" size="2" autofocus>
                                </div>
                                <button id="placeOrder" type="" class="btn btn-warning w-100">Place order...</button>

                            </p>
                        </div>
                    </div>
                </div>
                <!--Info-->
                <div class="row my-1 mx-1 mb-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Assistant</h5>
                            <div class="card-text" id="assistantBox">""</div>
                            <div class="card-text" id="arrivalsBox">""</div>
                            <div class="card-text" id="inventoryBox">""</div>
                            <div class="card-text" id="demandBox">""</div>
                        </div>
                    </div>
                </div>
            </div> <!--Info sidebar-->
        </div> <!--Main Row-->

<div id="wrapper" style="display: none;"></div>

    </div> <!--Main container-->

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script type="text/javascript" src ="js/simInv.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.min.js"></script>
    <!--gridjs-->
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.production.min.js"></script>
</body>
</html>