How-to: Including ChilliLibrary.js and chilliController.js

mazzy89 commented 9 years ago

I have installed successfully coova chilli and now I'm trying to make it work. I have created a custom login page. Here is it the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Captive Portal</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Bootstrap material design theme -->
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/material.min.css">

    <script src="public/js/ChilliLibrary.js"></script>
    <script type="application/javascript">

        chilliController.host = "192.168.1.1"; // Hard Coding - not a good idea
        chilliController.port = "3990";
        chilliController.interval = 60;

        chilliController.onError = handleErrors;
        chilliController.onUpdate = updateUI;

        /* Action triggered when buttons are pressed */
        function connect() {
            var username =  document.getElementById('username').value ;
            var password =  document.getElementById('password').value ;

            if (username == null || username == '')
                return setElementValue('logonMessage', 'Username is required');

            showWaitPage(1000);
            chilliController.logon( username , password ) ;
        }

        function updateUI (cmd) {
            alert('You called the method' + cmd + '\n Your current state is =' + chilliController.clientState);
        }

        // If an error occurs, this handler will be called instead
        function handleErrors (code) {
            alert('The last contact with the Controller failed. Error code =' + code );
        }

        //  finally, get current state
        chilliController.refresh();
    </script>
</head>
<body>

    <nav class="navbar navbar-default shadow-z-1">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="javascript:void(0)">NetFATE Captive Portal</a>
    </div>
    </nav>

    <div class="container">
        <div class="row" style="margin-top: 25px;">
            <div class="col-xs-8 col-xs-offset-2 col-md-4 col-md-offset-4 panel panel-default" style="padding: 55px;">
                <form class="form-horizontal" action="javascript:connect()">
                    <fieldset>
                        <div class="form-group">
                            <input id="username" class="form-control" type="text" name="username" placeholder="Username" autofocus>
                        </div>
                        <br>
                        <div class="form-group">
                            <input id="password" class="form-control" type="password" name="password" placeholder="Password">
                        </div>
                        <br>
                        <div class="form-group">
                            <a>Forgot the password?</a>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">Login</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/bootstrap-material-design/dist/js/material.min.js"></script>

    <script type="text/javascript">
        $.material.init(); // Init material design effect
    </script>
</body>
</html>

quite things aren't clear for me. Should I call also chillicontroller.js? Is this the right way? Thank you for the support

muratbeser commented 9 years ago

chilliController right in here https://github.com/coova/coova-chilli/blob/master/www/ChilliLibrary.js

mazzy89 commented 9 years ago

then I shouldn't include chilli controller in the head since it is right in ChilliLibrary.js

sevan commented 9 years ago

It may be better to bring this up on the mailing list if you're still stuck. Can this ticket be closed?

coova / coova-chilli

How-to: Including ChilliLibrary.js and chilliController.js #21