[HomeWallet] Niedziałający Chosen

Niedziałający Chosen, trochę usprawnień i wprowadzanie czytelników w błąd 😉 Tak minął ten tydzień przy pracach nad HomeWallet. Zapraszam do czytania.

Chosen

Pisałem ostatnio, że Chosen to super sprawa, bo łatwo jest np. aktualizować listę bez przeładowania strony. Oczywiście po tym jak to napisałem musiało się coś zepsuć. Nie wiem dlaczego, ale funkcja

$('.chosen-single-select').trigger('chosen:updated');

przestała działać. W innych projektach nie miałem z tym problemu. Będę jeszcze walczył, być może ma to coś wspólnego z .NET Core.

Jeżeli ktoś miał podobny problem i udało mu się do rozwiązać: dajcie znać w komentarzach. Za wszelkie pomysły będę bardzo wdzięczny 🙂

Dodam jedynie, że aktualizuję select tak jak trzeba, a metodę próbowałem odpalać zarówno poprzez klasę jak i id.

Aktualizacja select po dodaniu nowego sklepu

Walka z datami

Pisałem ostatnio również o datach i przypisywaniu początkowej wartości. Trochę Was okłamałem. Okazało się, że tamten sposób działa jedynie na wyświetlenie daty, natomiast nie przekazuje on daty do kontrolera. Rozwiązaniem tego jest przywrócenie do „asp-for” wartości Date bez metody, natomiast przypisanie początkowej wartości poprzez Value.

<input type="date" asp-for="Date" class="form-control" placeholder="Date" value="@Model.Date.ToString("yyyy-MM-dd")"/>

Ten sposób już faktycznie działa i nie mam z nim jak na razie problemów.

Trochę jQuery

Przy dodawaniu paragonu fajnie jest widzieć czy końcowa wartość zgadza się z tym, co mamy na prawdziwym rachunku. W tym celu na bieżąco wyświetlana jest łączna kwota rachunku.

Łączna kwota paragonu

Jak to działa? Najpierw w kontrolerze obliczam kwotę za dany produkt mnożąc cenę za jednostkę z ilością. Następnie poprzez Partial View wyświetlam ją w divie ze specjalną klasą. Poprzez jQuery pobieram wszystkie wartości jakie są zawarte w tych divach i przy każdym dodaniu/usunięciu produktu wywołuję funkcję która liczy i wyświetla wartość na stronie. Banalnie proste.

function Total(){
            jQuery.noConflict();
            var totalcost = 0;
            $('#total').empty();
            $('.producttotal').each(function(){
                totalcost+=parseFloat($(this).text());
            });
            $('#total').text(totalcost);
        }

Poprawka w bazie

Podczas tworzenia paragonu możemy wybierać sklep oraz produkty już z tych wcześniej dodanych. Powoduje to jednak, że możemy widzieć sklepy, które dodała jakaś inna osoba, co czasami może to być uciążliwe. Potrzebna więc była zmiana w bazie danych. Dla każdego produktu, sklepu oraz kategorii dodawany jest teraz UserID. Przy wypisywaniu sprawdzamy, czy zgadza się on z aktualnie zalogowanym użytkownikiem i problem znika.

Strona główna

Trochę zmian również zaszło na stronie głównej. Aktualnie, gdy wejdziemy na nią jako użytkownik niezalogowany, pojawi nam się strona tytułowa z opcją rejestracji lub logowania. W domyśle będzie to typowa główna strona aplikacji z zachętą do założenia konta i krótkim opisem.

Strona witająca nowych użytkowników

Wykorzystałem tutaj nowy layout, który nie wyświetla paska górnego. Robi się to bardzo łatwo. W katalogu “Shared” dodajemy plik cshtml w którym zaznaczamy gdzie ma się renderować zawartość strony. W pliku z zawartością musimy dodać linijkę kodu w której wskazujemy na nowy layout i gotowe.

@{
    Layout = "_MainPageLayout";
}

Po zalogowaniu pojawią się nam już wcześniej pokazywany widok. Tutaj jednak też nastąpiły zmiany. Na początku sprawdzam, czy użytkownik ma już dodane jakieś paragony. Jeżeli nie, pojawi mu się ekran zachęcający do skorzystania w portalu. Na razie wygląda jak wygląda, ale będzie lepiej 😉

Przy braku dodanych paragonów użytkownik zobaczy stronę zachęcającą do skorzystania z aplikacji

Gdy użytkownik ma już dodane paragony, pojawiają się one pogrupowane w daty. Najpierw pojawiają się te najnowsze. Po naciśnięciu przycisku załadują się kolejne, o czym pisałem ostatnio. Aktualnie sprawdzam dodatkowo, czy zostało coś załadowane, a jeżeli nie, to wyświetlam komunikat, że więcej paragonów nie znaleziono oraz ukrywam przycisk.

Gdy nie ma do pokazania więcej rachunków, pojawi się odpowiedni komunikat

Dodatkowo przy tym wszystkim jest już sprawdzane ID użytkownika, o czym zapomniałem ostatnio. Nie będziemy więc już widzieć cudzych paragonów.

Cykliczny rachunek

Zacząłem również implementować dodawanie cyklicznych rachunków. Na razie jest to jedynie widok, bardzo podobny do normalnego rachunku. W przyszłym tygodniu prawdopodobnie będę rozwijać właśnie ten temat.

Wstępny widok dodawania rachunku cyklicznego

 

Na dzisiaj to tyle. Ciągle rozmyślam nad tym, czy jednak nie przenieść projektu na Angular2. Na razie jednak zostaję przy czystym .NET Core. Zobaczymy co z tego wyjdzie 😉

Dzięki za odwiedziny. Do zobaczenia, cześć!

Dodaj komentarz