v / examples / veb_fullstack / templates / products.html
88 lines · 83 sloc · 3.09 KB · b474aa0faf8d055aaced80ed0687ac354d0864a0
Raw 


1<!DOCTYPE html>


2<head>


3    <!--Let browser know website is optimized for mobile-->


4    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">


5


6    <!-- Compiled and minified CSS -->


7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


8


9    <!-- Compiled and minified JavaScript -->


10    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


11


12    <!-- Material UI icons -->


13    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


14


15    <title>Login</title>


16    @css 'src/templates/products.css'


17</head>


18<body>


19    <div>@include 'header_component.html'</div>


20    <h1 class="title">Hi, ${user.username}! you are online</h1>


21      <form id="product_form" method='post' action=''>


22        <div class="row">


23            <div class="input-field col s2">


24              <input id="product_name" name='product_name'  type="text" class="validate">


25              <label class="active" for="product_name">product name</label>


26            </div>


27            <div style="margin-top: 10px;">


28               <input class="waves-effect waves-light btn-small" type='submit' onclick="addProduct()" formaction="javascript:void(0);" value='Register' required autofocus>


29            </div>


30          </div>


31      </form>


32      <script type="text/javascript">


33        function getCookie(cookieName) {


34            let cookie = {};


35            document.cookie.split(';').forEach(function(el) {


36                let [key,value] = el.split('=');


37                cookie[key.trim()] = value;


38            })


39            return cookie[cookieName];


40        }


41         async function addProduct() {


42            const form = document.querySelector('#product_form');


43            const formData = new FormData(form);


44            console.log(getCookie("token"));


45            await fetch('/controller/product/create', {


46                 method: 'POST',


47                 body: formData,


48                 headers :{


49                    token: getCookie("token")


50                 }


51             })


52             .then( async (response) => {


53                 if (response.status != 201) {


54                     throw await response.text()


55                 }


56                 return await response.text()


57             })


58             .then((data) => {


59                 document.location.reload(true)


60             })


61             .catch((error) => {


62                 alert(error);


63             });


64         }


65      </script>


66    <div class="products-table card-panel">


67        <table class="highlight striped responsive-table">


68            <thead>


69            <tr>


70                <th>ID</th>


71                <th>Name</th>


72                <th>Created date</th>


73            </tr>


74            </thead>


75


76            <tbody>


77                @for product in user.products


78                <tr>


79                    <td>${product.id}</td>


80                    <td>${product.name}</td>


81                    <td>${product.created_at}</td>


82                </tr>


83                @end


84            </tbody>


85        </table>


86    </div>


87</body>


88</html>


89