Import konferencji - zmagania z Angularem

Minęło trochę czasu od moich ostatnich doświadczeń z Angularem, więc nie było łatwo dopisać nową funkcjonalność, ale udało się! Można już importować pojedynczą konferencję do Speech Rank'a! Esteci nie będą jeszcze zachwyceni, ale działa, więc się pochwalę. 

Przygotowałam podstawowy formularz zbierający dane konferencji: rok, nazwę i ID (ID playlisty z Youtuba, póki co), który odpala funkcję importConference na kontrolerze:

<h4 class="import-title">Import conference</h4>
<div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" ng-model="conference.name" placeholder="Boiling Frogs" />
</div>
<div class="form-group">
    <label>Year</label>
    <input type="text" class="form-control" ng-model="conference.year" placeholder="2016" />
</div>
<div class="form-group">
    <label>Youtube playlist Id</label>
    <input type="text" class="form-control" ng-model="conference.playlistId" placeholder="PLVT0blg4rCWAACyuDZKEn1cy1CR4zhz4R" />
</div>
<button class="btn default-btn pull-right" ng-click="importConference(conference.name, conference.year, conference.playlistId)">Import
</button>

Kontroler wywołuje funkcję serwisu, który wysyła zapytanie do API. Jeśli konferencja została zaimportowana poprawnie, dodaje ją do istniejących kolekcji danego roku. Tak, słusznie zauważasz, że nie ma prawilnej walidacji pól, a zwłaszcza roku. Cóż, done is better than perfect.


$scope.importConference = function(newConfName, newConfYear, playlistLink) {
    if (newConfName !== '' && newConfYear !== '' && playlistLink !== '') {
        ConferenceService.importConference(newConfYear, newConfName, playlistLink)
            .then(function(response) {
                console.log('response', response);
                console.log($scope.yearsArray.map(function(year) {
                    if (year.year == newConfYear) {
                        year.conferences.push(response.data);
                        console.log("Conference successfully imported!");
                    }
                }));

            }).catch(function(error) {
                toastr.error(error.data, 'Server Error!');
            });
    } else {
        console.log('not enough info to import conference!');
    }
};

Serwis robi najmniej skomplikowaną, choć najbardziej ekscytującą rzecz - wysyła zapytanie do API.

conferenceService.importConference=function (year, name, playlistId) {
    return $http( {
        method: 'POST', data: {
            year: year, name: name, playlistId: playlistId
        }
        , url: REST_END_POINT + '/api/import/'
    }
    );
};

O tym, jakie zmiany zaszły w API jeszcze napiszę...

Komentarze

Popularne posty z tego bloga

Jeśli jesteś najmądrzejszą osobą w pokoju, to jak najszybciej zmień pokój!

Kto jest bardziej inteligentny od Ciebie?

Fastline dla kobiet w IT? Nie, dziękuję.