Prosty import i eksport danych w AgendaEditor

W naszej tworzonej aplikacji AgendaEditor, możemy wpisywać dane poprzez pola tekstowe w formularzu. Jednak po odświeżeniu strony wszystkie dane zostają usuwane. Nie będziemy jeszcze teraz implementować zapisu danych do bazy danych. Ale chcielibyśmy, aby użytkownik miał możliwość importu i eksportu danych z/do aplikacji.

Na początek wybrałem dane w formie tekstowej, oddzielone tabulatorami. Dlaczego? Bo jeśli mamy dane w Excelu, to po ich skopiowaniu automatycznie wstawiane są tabulatory, aby oddzielić od siebie kolumny. Jeśli mamy dane w takiej formie (oddzielone tabulatorami), to po wklejeniu do Excela, zostaną poprawnie wklejone w oddzielne wiersze i kolumny. Dzięki temu będziemy mogli swobodnie przenosić dane pomiędzy aplikacją AgendaEditor a Excelem.

Struktura danych ma odpowiadać formularzowi. Jeden wiersz ma mieć postać:

tytuł	imię	nazwisko	czas_wystąpienia

Oczywiście wierszy może być więcej (kolejne wystąpienia na liście). Przykładowo:

Programowanie	Jan	Kowalski	00:20
AngularJS	Anna	Nowak	00:25

import_eksport_excel

Formularz importu/eksportu w HTML

W pliku import.html dodajemy wielowierszowe pole tekstowe textarea:

Ustawiamy dla niego model dyrektywą ng-model. Skorzystamy z getterów i setterów, tak jak w tym wpisie. Dlatego też musimy włączyć ich obsługę za pomocą dyrektywy ng-model-options. Dane wklejane do tego pola tekstowego będą automatycznie aktualizować model w aplikacji. Jak również modyfikacja modelu (np. poprzez poprzedni formularz) będzie aktualizować zawartość tego pola.

Kontroler w JavaScript

Dlatego potrzebne nam dodatkowe pole z getterami i setterami (które będą konwertować dane z modelu na tekst z tabulatorami) w naszym serwisie Agenda. W pliku import.js po prostu korzystamy z serwisu:

Serwis Agenda w JavaScript

Przejdźmy zatem do naszego serwisu w pliku agenda.js. Dodajemy w nim nowe pole z getterem i setterem:

Implementacja settera

W zmiennej newImport mamy zawartość wielowierszowego pola tekstowego z danymi do agendy oddzielonymi tabulatorami.

Najpierw musimy podzielić wszystko na osobne linie za pomocą metody split (jako separator podajemy znak nowej linii \n).

Następnie w pętli przechodzimy po wszystkich liniach. Wrzucamy na pustą listę z danymi kolejne rekordy. Żeby mieć do nich dostęp, należy linię podzielić z separatorem tabulator \t.

Implementacja gettera

Przechodzimy po liście z danymi i przepisujemy każde pola do jednego stringa oddzielając je tabulatorami \t. Zaś kolejne rekordy oddzielamy znakami nowego wiersza \n (opuszczamy ostatni znak nowej linii, żeby nie wstawiać pustej linii na końcu wszystkich rekordów).

Podgląd działającej implementacji

One response on “Prosty import i eksport danych w AgendaEditor

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *