Subversion Repositories bacoAlunos

Rev

Blame | Last modification | View Log | RSS feed 

<%@ page import="org.json.JSONObject" %>
<%@ page import="org.json.JSONArray" %>
<%@ page import="pt.estgp.es.exemplos.hibernate.Seccao" %>
<%@ page import="pt.estgp.es.exemplos.hibernate.SeccaoImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
</head>
<body >


<!-- MINIMO USANDO TILES DAQUI PARA DIANTE-->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<script type="text/javascript" src="<%=request.getContextPath()%>/exemplos/angular-pageslide-directive.js"></script>


<script src="<%=request.getContextPath()%>/js/rest-layer.js"></script>



<style>
    .ng-pageslide{
        background-color: rgb(230,230,181);
        overflow: scroll;
    }
    body.ng-pageslide-body-open::before{
        content: '.';
        display: block;
        position: absolute;
        top: 0;
        background-color: rgb(230,230,181);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0.5;
        transition: opacity 1s;
        opacity: 0.57;
        pointer-events: all;
    }

    body.ng-pageslide-body-closed::before{
        transition: opacity 1s;
        content: '.';
        display: block;
        position: absolute;
        top: 0;
        background-color: rgb(0,0,0);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
    }
</style>

<div ng-app="testePageSlide" ng-controller="testePageSlideController" id="testePageSlide">


    <%

        Seccao s1 = new SeccaoImpl();
        s1.setTitulo("Teste 1");
        s1.setId(1);

        Seccao s2 = new SeccaoImpl();
        s2.setTitulo("Teste 2");
        s2.setId(2);

        List<Seccao> seccoes = new ArrayList<>();
        seccoes.add(s1);
        seccoes.add(s2);

        JSONObject js = new JSONObject();
        JSONArray arr = new JSONArray();

        for(Seccao s : seccoes)
        {
            JSONObject sobj1 = new JSONObject();
            sobj1.put("titulo",s.getTitulo());
            sobj1.put("id",s.getId());
            arr.put(sobj1);
        }

        js.put("seccoes",arr);


    %>

    <script>
        var testePageSlide = angular.module('testePageSlide', ['pageslide-directive']);


        testePageSlide.controller('testePageSlideController', function ($scope)
        {
            $scope.seccoes = <%=js.toString()%>;
            $scope.seccaoEdit = null;
            $scope.inSlide = "Hello Slide";
            $scope.slideOpened = false;
            $scope.isSlideOpened = function() { return $scope.slideOpened; };
            $scope.openSlide = function() { $scope.slideOpened = true; };
            $scope.closeSlide = function() { $scope.slideOpened = false; };
            $scope.toogleSlide = function() { $scope.slideOpened = !$scope.slideOpened; };


            $scope.editSeccao = function(s) {
                $scope.seccaoEdit = s;
                $scope.openSlide();
            };





            $scope.saveSeccao = function(s){

                rest(
                    "<%=request.getContextPath()%>/ws/api/login",
                    "saveSeccao",
                    {
                        seccao:  s
                    },
                    "#testePageSlide",
                    function(resposta){
                        alert("ok:" + resposta.result);
                        $scope.closeSlide();
                        $scope.$apply();
                    },
                    function(resposta){
                        alert("ok:" + resposta);
                    }
                );
            }





        });
    </script>

    <div class="web-messages"></div>

    <div id="slide" pageslide <%--ps-push="true"--%> ps-open="isSlideOpened()" ps-size="50%" <%--ps-size="1000px"--%> style="max-width: 100%;" ps-key-listener="false" ps-click-outside="false">
        <div class="web-messages"></div>
        <h1>{{inSlide}}</h1>

        ID: {{seccaoEdit.id}}
        <br/>
        TITULO: <input type="text" ng-model="seccaoEdit.titulo">
        <button ng-click="saveSeccao(seccaoEdit)">Salvar</button>
        <button ng-click="toogleSlide()">Toggle Slide</button>
    </div>

    <button ng-click="openSlide()">Open Slide</button>
    <button ng-click="toogleSlide()">Toggle Slide</button>


    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>TITULO</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="s in seccoes.seccoes">
            <th>{{s.id}}</th>
            <th>{{s.titulo}}</th>
            <th><button type="button" ng-click="editSeccao(s)">EDITAR</button></th>
        </tr>
        </tbody>
    </table>

    <pre>
            {{seccoes | json}}
        </pre>


</div>
<!-- FIM DO MINIMO PARA PAGESLIDE USANDO TILES-->

</body>
</html>