ccuffs / horario Goto Github PK

Mostrador de horários e organização de salas de aula do curso de Ciência da Computação da UFFS, Chapecó/SC.

Home Page: https://cc.uffs.edu.br/horario

CSS 38.10% HTML 16.43% JavaScript 45.46%

html css javascript bootstrap pwa uffs hacktoberfest hacktoberfest2020

horario's Introduction

Sobre o Projeto

Esse repositório contém a aplicação para mostrar e organizar as salas de aula do curso de Ciência da Computação da UFFS, Chapecó/SC. A página está disponível em cc.uffs.edu.br/horario.

Estrutura do dados

Professores

As informações sobre cada professor estão no arquivo chamado ./data/members.json. A estrutura do arquivo é a seguinte:

{
    "fernando.bevilacqua": {
        "name": "Fernando Bevilacqua",
        "email": "[email protected]"
    },
    "lcaimi": {
        "name": "Luciano Lores Caimi",
        "email": "[email protected]"
    },
    ...
}

Fases do Curso

As informações sobre cada fase do curso estão no arquivo chamado ./data/groups.json. A estrutura do arquivo é a seguinte:

{
    {
        "id": 1,
        "name": "Vespertino - 1ª fase"
    },
    {
        "id": 2,
        "name": "Vespertino - 3ª fase"
    },
    ...
}

Disciplinas

As informações sobre cada disciplina estão no arquivo chamado ./data/courses.json. A estrutura do arquivo é a seguinte:

{
    "gex178": {
        "name": "Nome da disciplina",
        "description": "Descrição resumida da disciplina"
    },
    "gex179": {
        "name": "Nome da outra disciplina",
        "description": "Descrição resumida da outra disciplina"
    },
    ...
}

Organização da tabela

Como as informações da tabela são organizadas estão no arquivo chamado ./data/$NOME_SEMESTRE/schedule.json. A estrutura do arquivo é a seguinte:

[
    {
        "id": 1, // ID 
        "code": "GEX208", // ID da disciplina
        "group": 1, // ID da fase do curso
        "weekDay": 2, // Identificador do dia da semana(Segunda, Terça, Quarta...)
        "period": 5, // Identificador do período(07:30, 10:20, 13:30 ...)
        "members": [...] // Array de ID's do professores
    },
]

Desenvolvimento

Rode o comando abaixo para gerar os arquivos do Tailwind:

npx tailwindcss-cli@latest build ./css/tailwind.css -o ./css/tailwind.min.css

Deploy

Se você estiver fazendo um deploy dessa aplicação, é interessante rodar alguns comandos para garantir a melhor performance.

Na raiz do projeto, rode:

NODE_ENV=production npx tailwindcss-cli@latest build ./css/tailwind.css -o ./css/tailwind.min.css

Features

Conceitos de flexbox;
Uso do tema de cores do curso;
Script para gerar as tabelas;
Tooltips criados com CSS.

Licença

Esse projeto é licenciado nos termos da licença open-source Apache 2.0 e está disponível de graça.

horario's People

Contributors

Stargazers

Watchers

Forkers

lcaimi leovargasdev dbguilherme riannbarbosa

horario's Issues

Melhorar o README

O README atual não contém informação útil. Ele precisa ser melhor tranbalhado.

Mostrar tooltip de info sobre curso e professor no mouse over

O objetivo dessa issue é integrar a biblioteca tippyjs na página de horários para permitir que informações sejam mostradas em um tooltip quando o usuário colocar o cursor do mouse sobre o nome de um professor ou sobre o nome de uma disciplina.

As informações sobre cada professor deverão ser colocadas em um único arquivo chamado /data/members.json (esse arquivo precisa ser criado). A estrutura desse arquivo será a seguinte:

{
    "fernando.bevilacqua": {
        "name": "Fernando Bevilacqua",
        "email": "[email protected]"
    },
    "lcaimi": {
        "name": "Luciano Lores Caimi",
        "email": "[email protected]"
    },

    ...
}

No arquivo acima, o nome da propriedade é o idUFFS do professor em questão, que também é usado no campo members do arquivo schedule.json que mostra os horários, por exemplo, 2020.1/data/schedule-2020-1.json.

As informações sobre cada disciplina deverão ser colocadas em um único arquivo chamado /data/courses.json (esse arquivo precisa ser criado). A estrutura desse arquivo será a seguinte:

{
    "gex178": {
        "name": "Nome da disciplina",
        "description": "Descrição resumida da disciplina"
    },
    "gex179": {
        "name": "Nome da outra disciplina",
        "description": "Descrição resumida da outra disciplina"
    },
    ...
}

No arquivo acima, o nome da propriedade é o código da disciplina, que está disponível campo code de cada uma das entradas do arquivo schedule.json que mostra os horários, por exemplo, 2020.1/data/schedule-2020-1.json. Detalhe que, no momento, todas as disciplinas listadas no arquivo schedule.json estão com o campo code vazias, mas você inventar um código qualquer para testar se tudo está funcionando.

Em resumo:

Adicionar tippyjs à index.html
Criar /data/members.json com informações sobre cada professor (indexado pelo idUFFS);
Criar /data/courses.json com informações sobre cada disciplina (indexado pelo campo code da disciplina);
Quando o usuário colocar o cursor do mouse sobre o nome de um professor, mostrar um tooltip com as informações desse professor (informações essas obtidas do arquivo /data/members.json)
Quando o usuário colocar o cursor do mouse sobre o nome de uma disciplina, mostrar um tooltip com as informações dessa disciplina (informações essas obtidas do arquivo /data/courses.json).

Atualizações gerais no projeto

Ao abrir o projeto eu resolvi fazer os seguintes ajustes:

Layout do modo dark, mantendo o padrão do site de cc.
Modificando o cabeçalho da página.
Removendo a dependência da lib Bootstrap ao usar flexbox.
Ajustes no script para gerar as tabelas.

Print do novo layout:

OBS: Eu havia esquecido de abrir uma issue @Dovyski kkkkkk espero que você considere os meus ajustes.

OBS 2: Devo solicitar o merge, quando eu finalizar a issue #3