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
                    Este input está aqui porque faz parte do form generalizado do struts para receber ficheiros
                    carregados no formato JSON, o form pode ser extendido por outro que necessite de importar ficheiros.
                    O upload do nosso formulario que herda do form de upload de ficheiros tem de levar
                    uma estrtura tipo {"service":"ok","uploadedFiles": $scope.uploadedFiles };
                    é por isso que temos aqui o campo a chamar a função jsonFiles, para isso ser construido
                    e estar constantemente associado ao form
                    -->
                    <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-multiple="true"
               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>