Subversion Repositories bacoAlunos

<%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/tlds/jomm.tld" prefix="jomm" %>
<%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/tlds/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="/WEB-INF/tlds/baco.tld" prefix="baco" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script>
    /*FUNCOES DE CONFIRMACAO DO FORM BASTANTE SIMPLES*/
    function widgetConfirmSimples(form)
    {
        widgetSimpleCall('uploadFilesSimple',form,
                function()
                {
                    alert("OK");
                },
                function()
                {
                    alert("Fail");
                });
    }

    function widgetFeedbackCall(form)
    {
        widgetCall('uploadFilesFeedback',form,
                function(response)
                {
                    alert("Accao de resposta terminada: " + JSON.stringify(response));
                },
                function(response)
                {
                    alert("Accao Falhou mas as resposta foi esta: "  + JSON.stringify(response));
                });
    }
</script>

<!-- 1 - Para upload de ficheiros são necessários estes três attributos id ng-app ng-controller-->

<div class="container-fluid"
     id="exemploUploadModuleCall"
     ng-app="exemploUploadModuleCall"
     ng-controller="exemploUploadControllerCall">

<div class="panel panel-default">
    <div class="panel-heading">Exemplo de um Controlador de Widgets com Upload de Ficheiros</div>
    <div class="panel-body">


        <p>Form de Struts com Auto preenchimento de Campos mas invoca um Widget Controller</p>

        <p>Experimente a colocar manualmente este valor na caixa de transporte: {"service":"ok","uploadedFiles":[]}</p>

        <html:form styleClass="form-horizontal" action="/user/fileUploadWidgetExample" onsubmit="return false;">
            <div class="web-messages">Aqui vão aparecer as mensagens de Erro ou de Feedback do Widget</div>

            <!-- 2 - dar um ID à caixa de transporte -->

            <p>Caixa de recepção de dados do UPLOAD WIDGET</p>
            <p><input class="form-control" type="text" id="UPLOADED_FILES_RESULT"/></p>

            <div class="form-group">
                <label class="col-md-2 control-label">Campo para esconder os dados para enviar os ficheiros importados:</label>
                <div class="col-md-10">
                    <!-- 3 - associar a caixa de envio ao modelo de dados do controlador através do value -->
                    <html:text styleClass="form-control" property="uploadedFiles" value="{{jsonFiles()}}"/>
                </div>
            </div>

            <a class="btn btn-default" href="#"
               data-title="Importação para a pasta TMP Exemplo"
               data-toggle="modal"
               data-target="#filesUploadModal"
               data-jsontargetid="#UPLOADED_FILES_RESULT">
                Faça Upload de Ficheiros Clicando Aqui
            </a>
            <!-- 4 - Criar os scripts de Importacão basta copiar estes scripts exactamente como estão
            a menos que haja mais que um local para importação de ficheiros, nesse caso são necessários dois
            modulos e terão de se mudar o nome do módulo e da variavel e consequentemente o ng-app e o ng-controller no painel-->
            <script>

                //DECLARACAO DA APLICACAO LOCAL EM ANGULAR
                var exemploUploadModule = angular.module('exemploUploadModuleCall', []);
                GLOBAL_BacoAngularAppDependencies.push('exemploUploadModuleCall');

                exemploUploadModule.controller('exemploUploadControllerCall', function($scope) {
                    //$scope.files = {"service":"ok","uploadedFiles":[{fileName:"teste"}]};
                    $scope.uploadedFiles = [];
                    $scope.jsonFiles = function() {
                        return {"service":"ok","uploadedFiles": $scope.uploadedFiles };
                    };
                    $scope.removeFileFromModel = function(tmpName)
                    {
                        for(var i in $scope.uploadedFiles)
                        {
                            if($scope.uploadedFiles[i].tmpName == tmpName)
                            {
                                $scope.uploadedFiles.splice(i,1);
                            }
                        }

                    }
                });

                //EVENTO DE CHANGE PARA PUXAR DADOS PARA O MODELO
                $(document).ready(function(){
                    $("#UPLOADED_FILES_RESULT").change(function()
                    {
                        var uploadedIncomingJson = JSON.parse($("#UPLOADED_FILES_RESULT").val());
                        for(var i in uploadedIncomingJson.uploadedFiles)
                        {
                            file = uploadedIncomingJson.uploadedFiles[i];
                            angular.element($("#exemploUploadModuleCall")).scope().uploadedFiles.push(file);
                        }
                        angular.element($("#exemploUploadModuleCall")).scope().$apply();
                    });
                });

                function removeFileFromModel(tmpName)
                {
                    alert(tmpName);
                }

            </script>

            <!-- 5 - Finalmente, colocar a vista dos ficheiros importados copiar exactamente como está aqui -->
        <h2>VISTA EM ANGULAR DO MODELO DE DADOS, COM POSSIBILDADE DE UPDATE</h2>
        <div class="list-group">
            <div class="list-group-item clearfix" ng-repeat="f in uploadedFiles">
                <div class="list-group-item clearfix">
                    <div class="col-md-10">
                        <img src="<%=request.getContextPath()%>/imgs/mime/{{ f.extension }}.gif"/> - {{ f.fileName }} {{ (f.fileSize / 1024)| number:0 }}KB
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-danger" type="button" ng-click="removeFileFromModel(f.tmpName)"><span class="glyphicon glyphicon-remove"/></button>
                    </div>
                </div>
                <div class="list-group-item clearfix">
                    <div class=" col-md-2 control-label">Titulo:</div>
                    <div class="col-md-10 control-label">
                        <input type="text" class="form-control" ng-model="f.title"/>
                    </div>
                </div>
                <div class="list-group-item clearfix">
                    <div class="col-md-2 control-label">Descrição:</div>
                    <div class="col-md-10 control-label">
                        <textarea rows="3" class="form-control" ng-model="f.description"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

            <div class="form-group">
                <label class="col-md-2 control-label">Nome</label>
                <div class="col-md-10">
                    <html:text styleClass="form-control" property="nome"/>
                </div>
            </div>

            <button class="btn btn-success" type="button" onclick="widgetConfirmSimples(this.form)">Submeter Simulação Simples</button>
            <button class="btn btn-success" type="button" onclick="widgetFeedbackCall(this.form)">Submeter Simulação Servico Com Resposta JSON</button>
        </html:form>
    </div>
</div>

</div>