Dodawanie przepisów ciąg dalszy

Najpierw pokazałem Wam mockup, później mało funkcjonalną, ale ładnie wyglądającą stronę już w samej aplikacji. Dzisiaj przyszła pora na obsługę zagadnienia dodawania przepisów w Angularze.

Ostatnio pisanie aplikacji idzie mi dosyć topornie. Jest to związane pewnie przede wszystkim spowodowane tym, że w mojej głowie lata cała masa pomysłów od których nie potrafię się odciąć, a o których częściowo pisałem w poprzednim poście.

Ale ale…

Każdego dnia pojawia się coś nowego i za każdym razem będę spieszył, żeby się z Wami tym podzielić.

Dzisiaj przyszła pora na część Angularową dodawania przepisów. Powstał już kontroler, a także serwis przygotowany na komunikację z WebAPI (co nastąpi już niedługo).

Pomożecie?

Nad jedną rzeczą jednak się głowię i nie mam pomysłu jak do tematu podejść. Otóż jak spojrzycie do tego posta zobaczycie miejsce na wpisywanie składników dania. Chciałbym, aby działało to tak, że użytkownik wpisuje po przecinku/średniku/CzyCzymśTam kolejne składniki. Po wpisaniu kilku może wcisnąć przycisk Dodaj i pokażą się one pod spodem. Zamysłem moim jest to, żeby stworzyć słownik tych składników i w trakcie wpisywania je podpowiadać. Chciałbym żeby to działało dokładnie tak jak w Outlooku (albo Gmailu) w czasie wpisywania odbiorców tzn. wpisuję pierwsze litery i system podpowiada do kogo wysłać maila. Jak zaznaczę tę osobę to jest ona „podlinkowana”, a ja po średniku mogę wpisywać kolejne osoby. Rozumiecie? Nie? To zobaczcie na gifie 🙂

GIF

Wiecie jak do tego podejść? Może jakaś biblioteka? Będę wdzięczny za wszelkie propozycje.

A wracając do tego co powstało to:

'use strict';
app.controller('dishController', ['$scope', '$location', '$routeParams', 'authService', 'dishService', 'imageService', function ($scope, $location, $routeParams, authService, dishService, imageService) {
    //TODO: Podpowiadanie składników (stworzyć w bazie i znaleźć sposób na autopodpowiadanie
    $scope.authentication = authService.authentication;
    $scope.tempIngredients = "";
    $scope.dish = {};
    $scope.difficultyLevels = {};
    $scope.categories = {};
    $scope.prepTimes = {};
    var dishId = $routeParams;

    function init(
    ) {
        dishService.getDishDifficultyLevels().then(function (results) {
            $scope.difficultyLevels = results.data;
        }, (function (data, status, headers, config) {
            alert(data + " status: " + status);
        }));

        dishService.getDishCategories().then(function(results) {
            $scope.categories = results.data;
        }, (function(data, status, headers, config) {
            alert(data + " status: " + status);
        }));

        dishService.getPrepTimes().then(function (results) {
            $scope.prepTimes = results.data;
        }, (function (data, status, headers, config) {
            alert(data + " status: " + status);
        }));

        dishService.getDishInstance(dishId).then(function(results) {
            $scope.dish = results.data;
        });
    }

    init();

    $scope.addDish = function () {
        if ($scope.editForm.$valid) {
            dishService.addDish($scope.dish).then(function (results) { }, function (data, status, headers, config) { });
        }
    }

    $scope.addIngredients = function() {
        if ($scope.tempIngredients.length >= 0) {
            $scope.dish.Ingredients = $scope.dish.Ingredients.concat($scope.tempIngredients.split(","));
        }
    }

    $scope.upload = function (file) {
        imageService.uploadImage(file, $scope.authentication.userName, "dishImage", $scope.dish.Id)
            .then(function (results) { }, function (data, status, headers, config) { });
    }
    
}]);

oraz

'use strict';
app.factory('dishService', ['$http', 'ngAuthSettings', function ($http, ngAuthSettings) {
    var serviceBase = ngAuthSettings.apiServiceBaseUri + 'api/dish/';
    var dishService = {};

    var addDish = function(dish) {
        return $http.post(serviceBase + 'addDish/', dish).then(function(results) {
            return results.data;

        });
    };

    var getDishInstance = function (dishId) {
        if (dishId != null) {
            return $http.post(serviceBase + 'getDish/' + dishId).then(function(results) {
                return result.data;
            });
        } else {
            return $http.post(serviceBase + 'getDish/').then(function (results) {
                return result.data;
            });
        }
    }

    var getDishDifficultyLevels = function () {

        return $http.get(serviceBase + 'getDishDifficultyLevels/').then(function (results) {
            return results;
        });
    };

    var getDishCategories = function() {
        return $http.get(serviceBase + 'getDishCategories/').then(function(results) {
            return results;
        });
    };

    var getPrepTimes = function() {
        return $http.get(serviceBase + 'getPrepTimes/').then(function(results) {
            return results;
        });
    }

    dishService.addDish = addDish;
    dishService.getDishDifficultyLevels = getDishDifficultyLevels;
    dishService.getDishCategories = getDishCategories;
    dishService.getPrepTimes = getPrepTimes;
    dishService.getDishInstance = getDishInstance;

    return dishService;
}]);

Dalej już zostaje tylko połączyć to z WebAPI i mogę zabierać się za kolejne rzeczy 🙂

Related posts

  • Gerg0szek

    Poszukaj czegoś pod słowami kluczowymi „JS tag autocomplete” Taka funkcjonalność często właśnie przy tagach jest wykorzystywana. Tutaj przykładowa biblioteka, niestety z jQuery http://aehlke.github.io/tag-it/

  • Kajetan Duszyński

    Dokładnie o coś takiego mi chodziło. Poszukam czy jest coś takiego w Angularze 🙂 Dzięki!!