7
respostas

Erro no Html e Negociação Controller

Eu uso o aplicativo Atom pros códigos, não sei se o problema é o aplicativo que eu uso. Mas é que eu já refiz todas as aulas do curso e baixei o projeto do zero, e os erros continuam no console quando vou importar negociações, tudo indica que o erro esta no index.html e no NegociacaoController.js

Index.Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

</head>
<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView"></div>

    <form class="form" onsubmit="negociacaoController.adiciona(event)">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>
        </div>

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <div class="text-center">

        <button onclick='negociacaoController.importaNegociacoes()' class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>

        <button onclick="negociacaoController.apaga()" class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div>
    <br>
    <br>

    <div id="negociacoesView"></div>

    <script src="js/app/models/Negociacao.js"></script>
    <script src="js/app/controllers/NegociacaoController.js"></script>
    <script src="js/app/helpers/DateHelper.js"></script>
    <script src="js/app/models/ListaNegociacoes.js"></script>
    <script src="js/app/views/View.js"></script>
    <script src="js/app/views/NegociacoesView.js"></script>
    <script src="js/app/models/Mensagem.js"></script>
    <script src="js/app/views/MensagemView.js"></script>
    <script src="js/app/services/ProxyFactory.js"></script>
    <script src="js/app/helpers/Bind.js"></script>
    <script>
        let negociacaoController = new NegociacaoController();
    </script>

</body>
</html>

NegociacaoController.js

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes = new Bind(
            new ListaNegociacoes(),
            new NegociacoesView($('#negociacoesView')),
            'adiciona', 'esvazia');

        this._mensagem = new Bind(
            new Mensagem(), new MensagemView($('#mensagemView')),
            'texto');
    }

    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._mensagem.texto = 'Negociação adicionada com sucesso';
        this._limpaFormulario();
    }

    importaNegociacoes() {

        let xhr = new XMLHttpRequest();

        xhr.open('GET', 'negociacoes/semana');

        xhr.onreadystatechange = () => {

            if(xhr.readyState == 4){

                if(xhr.status == 200){

                  JSON.parse(xhr.responseText)
                    .map(objeto => new Negociacao(new Date(objeto.data), objeto.quantidade, objeto.valor))
                    .forEach(negociacao => this._listaNegociacoes.adiciona(negociacao));
                    this._mensagemTexto = 'Negociações imnportadas com sucesso.';

                }else{
                    console.log(xhr.responseText);
                    this._mensagem.texto = 'Não foi possível obter as negociacoes da semana.';

                }
            }
        };

        xhr.send();

    }

    apaga() {

        this._listaNegociacoes.esvazia();
        this._mensagem.texto = 'Negociações apagadas com sucesso';
    }

    _criaNegociacao() {

        return new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);
    }

    _limpaFormulario() {

        this._inputData.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();
    }
}
7 respostas

Qual o erro que aparece no console?

Achei um erro, ( eu acho )

Uma parte está assim:

this._mensagemTexto = 'Negociações imnportadas com sucesso.';

Já a outra logo em baixo, assim:

this._mensagem.texto = 'Não foi possível obter as negociacoes da semana.'

Veja que a primeira não está acessando o setter .texto.

Esse é o Alerta no console

DevTools failed to parse SourceMap: file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/css/bootstrap.css.map DevTools failed to parse SourceMap: file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/css/bootstrap-theme.css.map

Esse é o erro na hora de importar as negociações

Access to XMLHttpRequest at 'file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/negociacoes/semana' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. NegociacaoController.js:47 NegociacaoController.js:54 GET file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/negociacoes/semana net::ERR_FAILED

Já fiz a alteração sugerida e continua dando esse erro

Você tá usando o chrome pra rodar o projeto?

Estou usando o chrome, o index lá tá com o formato do chrome

Tenta isso aqui, a solução em inglês: https://alfilatov.com/posts/run-chrome-without-cors/ mas vou simplificar pra você.

Vá na sua área de trabalho, crie um atalho com o botão direito do mouse, se estiver usando o windows 10, coloque isso na barra de browsing :

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

Se for windows 7 :

"[PATH_TO_CHROME]\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

Caso seja OSX ou Linux , entra no site e veja o comando.

Depois clique em continuar, e é isso. Abra o projeto usando esse atalho ao invés do normal. Mas pelo que eu li isso não é recomendado usar na web, ou seja, apenas use em projetos locais. Acredito que o CORS seja usado para proteção.

Então, eu uso windows 10, então copiei e colei "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp, este trecho na "lupinha" barra de pesquisa e deu o seguinte erro: O Google Chrome não pode ler e gravar neste diretório de dados: ~/chromeTemp

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software