-1

Olá, Estou com dificuldade em montar uma tela com HTML, CSS, JS, AngularJS. Preciso montar uma tela onde o usuário escolhe a quantidade de parcelas, curso; e de acordo com isso deve montar : uma tabela onde na primeira linha deve conter os meses (que serão respectivos a quantidade de parcelas escolhidas); na segunda linha deve conter a quantidade de semanas de cada mês; na terceira linha os módulos do curso que será dividida proporcionalmente entre a quantidade de meses; na quarta as disciplinas desde dos respectivos módulos (cada módulo tem as disciplinas especificas); e na última linha as lições de cada uma das disciplinas. Lembrando que isso deve estar alinhado e será montado de acordo com o que o usuário vai escolher.

Não tenho ideia de como montar essa tela dinamicamente. Alguém poderia me ajudar ????

1

1 Resposta 1

1

Amigo,

A sua pergunta não é especifica. Você tem problemas com a lógica ou com a linguagem/tecnologia (Angular, javascript, ...)? Também carece de informações. Como os dados serão recebidos no controller do angular? É um JSON? O que seria quantas semanas do mês? (a partir de mês contar, como você vai contar as semanas - se o primeiro dia do mês for um sábado, já conta como uma semana, etc, etc)

Supondo que a dificuldade seja na logica, tentei reproduzir o cenário proposto:

var project = angular.module("meuProjeto", [

        ]);

        angular.module("meuProjeto").controller('MeuController', function () {

            var self = this;

            this.parcelas = null;
            this.curso = null;
            this.cursos = [
                {
                    id: "1",
                    nome: "Curso 1",
                    modulos: [
                        {
                            id: "1",
                            nome: "Modulo 1",
                            disciplinas: [
                                {
                                    id: "1",
                                    nome: "Disciplina 1",
                                    licoes: [
                                        {
                                            id: "1",
                                            nome: "Lição 1"
                                        },
                                        {
                                            id: "2",
                                            nome: "Lição 2"
                                        }
                                    ]
                                },
                                {
                                    id: "2",
                                    nome: "Disciplina 2",
                                    licoes: [
                                        {
                                            id: "3",
                                            nome: "Lição 3"
                                        },
                                        {
                                            id: "4",
                                            nome: "Lição 4"
                                        },
                                        ,
                                        {
                                            id: "5",
                                            nome: "Lição 5"
                                        }
                                    ]
                                },
                                {
                                    id: "3",
                                    nome: "Disciplina 3",
                                    licoes: [
                                        {
                                            id: "6",
                                            nome: "Lição 6"
                                        }
                                    ]
                                },
                            ]
                        },
                        {
                            id: "2",
                            nome: "Modulo 2",
                            disciplinas: [
                                {
                                    id: "4",
                                    nome: "Disciplina 4",
                                    licoes: [
                                        {
                                            id: "6",
                                            nome: "Lição 6"
                                        }
                                    ]
                                },
                                {
                                    id: "5",
                                    nome: "Disciplina 5",
                                    licoes: [
                                        {
                                            id: "6",
                                            nome: "Lição 6"
                                        }
                                    ]
                                },
                                {
                                    id: "6",
                                    nome: "Disciplina 6",
                                    licoes: [ ]
                                }
                            ]
                        },
                        {
                            id: "3",
                            nome: "Modulo 3",
                            disciplinas: [
                                {
                                    id: "7",
                                    nome: "Disciplina 7",
                                    licoes: []
                                },
                                {
                                    id: "8",
                                    nome: "Disciplina 8",
                                    licoes: []
                                },
                                {
                                    id: "9",
                                    nome: "Disciplina 9",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "4",
                            nome: "Modulo 4",
                            disciplinas: [
                                {
                                    id: "10",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "11",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "12",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "2",
                    nome: "Curso 2",
                    modulos: [
                        {
                            id: "1",
                            nome: "Modulo 1",
                            disciplinas: [
                                {
                                    id: "1",
                                    nome: "Disciplina 1",
                                    licoes: []
                                },
                                {
                                    id: "2",
                                    nome: "Disciplina 2",
                                    licoes: []
                                },
                                {
                                    id: "3",
                                    nome: "Disciplina 3",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "2",
                            nome: "Modulo 2",
                            disciplinas: [
                                {
                                    id: "4",
                                    nome: "Disciplina 4",
                                    licoes: []
                                },
                                {
                                    id: "5",
                                    nome: "Disciplina 5",
                                    licoes: []
                                },
                                {
                                    id: "6",
                                    nome: "Disciplina 6",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "3",
                            nome: "Modulo 3",
                            disciplinas: [
                                {
                                    id: "7",
                                    nome: "Disciplina 7",
                                    licoes: []
                                },
                                {
                                    id: "8",
                                    nome: "Disciplina 8",
                                    licoes: [
                                        {
                                            id: "3",
                                            nome: "Lição 3"
                                        },
                                        {
                                            id: "4",
                                            nome: "Lição 4"
                                        },
                                        ,
                                        {
                                            id: "5",
                                            nome: "Lição 5"
                                        }
                                    ]
                                },
                                {
                                    id: "9",
                                    nome: "Disciplina 9",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "4",
                            nome: "Modulo 4",
                            disciplinas: [
                                {
                                    id: "10",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "11",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "12",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "5",
                            nome: "Modulo 5",
                            disciplinas: [
                                {
                                    id: "13",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "14",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "15",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        },
                        {
                            id: "6",
                            nome: "Modulo 6",
                            disciplinas: [
                                {
                                    id: "16",
                                    nome: "Disciplina 10",
                                    licoes: []
                                },
                                {
                                    id: "17",
                                    nome: "Disciplina 11",
                                    licoes: []
                                },
                                {
                                    id: "18",
                                    nome: "Disciplina 12",
                                    licoes: []
                                }
                            ]
                        }
                    ]
                },
            ];
            this.arrayMeses = null;
            
            this.cursoSelecionado = null;

            this.Exibir = function ()
            {
                angular.forEach(self.cursos, function (value, key) {
                    
                    if(value.id == self.curso)
                    {
                        self.cursoSelecionado = value;
                    }

                });

                self.arrayMeses = self.GetArrayMeses();
                self.GetModulo();
            }

            this.GetArrayMeses = function()
            {
                var retorno = [];
                var i = 1;
                while(i <= self.parcelas)
                {
                    retorno.push(i);
                    i++;
                }
                return retorno;
            }

            this.GetModulo = function ()
            {
                //quantos modulos há e quantos meses
                var totalModulos = self.cursoSelecionado.modulos.length;
                var modulosPorMes = parseInt(totalModulos / self.parcelas);
                var resto = parseInt(totalModulos % self.parcelas);

                self.cursoSelecionado.meses = {};

                var ultimoIdProcessado = 0;

                angular.forEach(self.arrayMeses, function (value) {

                    self.cursoSelecionado.meses[value] = [];

                    var processadoMes = 0;

                    angular.forEach(self.cursoSelecionado.modulos, function (modulo, i) {

                        var modulosAdicionais = 0;

                        if (resto - (i - 1) > 0) {
                            modulosAdicionais = 1;
                        }

                        if(processadoMes < (modulosPorMes+modulosAdicionais))
                        {
                            if (ultimoIdProcessado < modulo.id)
                            {
                                self.cursoSelecionado.meses[value].push(modulo);
                                processadoMes++;
                                ultimoIdProcessado = modulo.id;
                            }   
                        }
                    });

                });


            };

        });
<html ng-app="meuProjeto">
<head>

</head>
<body ng-controller="MeuController as M">

    <div>
        <input type="text" ng-model="M.parcelas" placeholder="Parcelas" />
        <select id="repeatSelect" ng-model="M.curso">
            <option ng-repeat="option in M.cursos" value="{{option.id}}">{{option.nome}}</option>
        </select>
        <input type="button" value="Exibir" ng-click="M.Exibir()"/>
    </div>

    <table border="1">
        <thead>
            <tr>
                <th>Meses</th>
                <th ng-repeat="i in M.arrayMeses">Mês {{i}}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Semanas</td>
                <td ng-repeat="i in M.arrayMeses">4</td>
            </tr>
            <tr>
                <td>Módulos</td>
                <td ng-repeat="i in M.arrayMeses">
                    <p ng-repeat="j in M.cursoSelecionado.meses[i]">{{j.nome}}</p>
                </td>
            </tr>
            <tr>
                <td>Disciplinas</td>
                <td ng-repeat="i in M.arrayMeses">
                    <div ng-repeat="j in M.cursoSelecionado.meses[i]">
                        <p ng-repeat="z in j.disciplinas">{{z.nome}}</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Lições</td>
                <td ng-repeat="i in M.arrayMeses">
                    <div ng-repeat="j in M.cursoSelecionado.meses[i]">
                        <div ng-repeat="z in j.disciplinas">
                            <p ng-repeat="y in z.licoes">{{y.nome}}</p>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

2
  • Ericson, desculpe a falta de informação. O JSON respectivo a essa tabela está nesse link 1drv.ms/u/s!AkQLtKPK4v9kgcQMAhNdjoEvq_U1zw Sobre a questão da semana, o usuário entra com a data e as semanas são contadas a partir do domingo e finalizadas no sábado, mesmo que a data inicie e finalize no sábado. Cada módulo tem suas próprias disciplinas.
    – L. Luan
    12/03/2017 às 22:33
  • O JSON é muito similar ao meu exemplo. Acho que é só ajustar as variáveis. Precisa de ajuda com mais alguma coisa?
    – Ericson
    12/03/2017 às 22:53

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .