From 3751379f1e9a4c215fb6eb898b4ccc67659b9ace Mon Sep 17 00:00:00 2001
From: stephanchrst <stephanchrst@gmail.com>
Date: Tue, 10 May 2022 21:51:50 +0700
Subject: initial commit 2

---
 .../hw_posbox_homepage/views/configure_wizard.html | 180 +++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 addons/hw_posbox_homepage/views/configure_wizard.html

(limited to 'addons/hw_posbox_homepage/views/configure_wizard.html')

diff --git a/addons/hw_posbox_homepage/views/configure_wizard.html b/addons/hw_posbox_homepage/views/configure_wizard.html
new file mode 100644
index 00000000..d492a500
--- /dev/null
+++ b/addons/hw_posbox_homepage/views/configure_wizard.html
@@ -0,0 +1,180 @@
+{% extends "layout.html" %}
+{% from "loading.html" import loading_block_ui %}
+{% block head %}
+    <script>
+        $(document).ready(function () {
+            function changePage(key) {
+                $('.progressbar li[data-key=' + key + ']').prevAll().addClass('completed');
+                $('.progressbar li[data-key=' + key + ']').nextAll().removeClass('active completed');
+                $('.progressbar li[data-key=' + key + ']').addClass('active').removeClass('completed');
+                $('.config-steps.active').removeClass('active').addClass('o_hide');
+                $('.config-steps[data-key=' + key + ']').removeClass('o_hide').addClass('active');
+            }
+            $('.next-btn').on('click', function (ev) {
+                changePage($(ev.target).data('key'));
+            });
+            $('#config-form').submit(function(e){
+                e.preventDefault();
+                $('.loading-block').removeClass('o_hide');
+                $.ajax({
+                    url: '/step_configure',
+                    type: 'post',
+                    data: $('#config-form').serialize(),
+                }).done(function (url) {
+                    $('.loading-block').addClass('o_hide');
+                    changePage('done');
+                    if(url) {
+                        if ($('#iotname')[0].defaultValue == $('#iotname')[0].value){
+                            var cpt = 30;
+                        }else{
+                            var cpt = 100;
+                        }
+                        setInterval(function(){
+                            if(cpt === 0){
+                                window.location = url
+                            } else {
+                                $('.redirect-message').html('You will be redirected to <a href="'+ url +'">' + url + '</a> in <b>' + cpt + '</b> seconds');
+                                --cpt;
+                            }
+                        } , 1000);
+                    }
+                }).fail(function () {
+                    $('.error-message').text('Error in submitting data');
+                    $('.loading-block').addClass('o_hide');
+                });
+            });
+        });
+    </script>
+    <style>
+        .config-steps .title {
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .progressbar {
+            counter-reset: step;
+            z-index: 1;
+            position: relative;
+            display: inline-block;
+            width: 100%;
+            padding: 0;
+        }
+        .progressbar li{
+            list-style-type: none;
+            float: left;
+            width: 33.33%;
+            position:relative;
+            text-align: center;
+            font-size: 0.8rem;
+        }
+        .progressbar li:before {
+            content:counter(step);
+            counter-increment: step;
+            height:30px;
+            width:30px;
+            line-height: 30px;
+            border: 2px solid #ddd;
+            display:block;
+            text-align: center;
+            margin: 0 auto 6px auto;
+            border-radius: 50%;
+            background-color: white;
+            color: #ddd;
+            font-size: 1rem;
+        }
+        .progressbar li:after {
+            content:'';
+            position: absolute;
+            width:100%;
+            height:2px;
+            background-color: #ddd;
+            top: 15px;
+            left: -50%;
+            z-index: -1;
+        }
+        .progressbar li:first-child:after {
+            content:none;
+        }
+        .progressbar li.active, .progressbar li.completed {
+            color:#875A7B;
+        }
+        .progressbar li:last-child:before {
+            content: '✔';
+        }
+        .progressbar li.active:before {
+            border-color:#875A7B;
+            background-color:#875A7B;
+            color: #fff;
+        }
+        .progressbar li.completed:before{
+            border-color:#875A7B;
+            background-color: #fff;
+            color: #875A7B;
+        }
+        .progressbar li.active + li:after{
+            background-color:#875A7B;
+        }
+        .footer-buttons {
+            display: inline-block;
+            width: 100%;
+            margin-top: 20px;
+        }
+    </style>
+{% endblock %}
+{% block content %}
+    <h2 class="text-center">Configure IoT Box</h2>
+    <ul class="progressbar">
+        <li class="active" data-key="server">Connect to Odoo</li>
+        <li data-key="wifi">Connect to Internet</li>
+        <li data-key="done">Done</li>
+    </ul>
+    <form id="config-form" style="margin-top: 20px;" action='/step_configure' method='POST'>
+        <div>
+            <div class="config-steps active" data-key="server">
+                <table align="center">
+                    <tr>
+                        <td>IoT Box Name</td>
+                        <td><input type="text" id="iotname" name="iotname" value="{{ hostname }}"></td>
+                    </tr>
+                    <tr>
+                        <td>Server token</td>
+                        <td><input type="text" name="token" value="{{ server }}" placeholder="Paste your copied token here"></td>
+                    </tr>
+                </table>
+                <div class="text-center font-small" style="margin: 10px auto;">
+                    Server token is not mandatory for the community version.
+                </div>
+                <div class="footer-buttons">
+                    <a class="btn next-btn" style="float: right" data-key="wifi">Next</a>
+                </div>
+            </div>
+            <div class="config-steps wifi-step o_hide" data-key="wifi">
+                <table align="center">
+                    <tr>
+                        <td>Wifi Network</td>
+                        <td>
+                            <select name="essid">
+                                {% for id in ssid -%}
+                                    <option value="{{ id }}">{{ id }}</option>
+                                {%- endfor %}
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Password</td>
+                        <td><input type="password" name="password" placeholder="Optional"/></td>
+                    </tr>
+                    <input type="hidden" name="persistent" value="True"/>
+                </table>
+                <div class="footer-buttons">
+                    <a class="btn next-btn" data-key="server">Previous</a>
+                    <input class="btn" style="float: right" type="submit" value="Connect"/>
+                </div>
+            </div>
+            <div class="config-steps o_hide" data-key="done">
+                <h3 class="text-center" style="margin: 0;">✔ Nice! Your configuration is done.</h3>
+                <p class="text-center redirect-message" />
+            </div>
+        </div>
+        {{ loading_block_ui(loading_message) }}
+    </form>
+{% endblock %}
-- 
cgit v1.2.3