DSP 2017 – Pierwsza funkcjonalność – dodawanie nowych zadań

2
Logo projektu DSP 2017

A więc podsumowanie pierwszego tygodnia DSP czas napisać.

Więcej w tym tygodniu miałem nauki samego Angulara 2, niż samego pisania go.
Jeśli ktoś jest zainteresowany, to zapraszam do tego kursu na Udemy. Max naprawdę świetnie tłumaczy.

Opis prac i problemów:

A więc idąc dalej, co zostało zrobione w aplikacji ToDay?
Dodałem główną i najważniejszą funkcje takich list. Dodawanie zadań. Na razie wszystko jest stylowane surowym Bootstrapem ale mi to osobiście nie przeszkadza. W fazie tworzenia aplikacja nie musi wyglądać, musi działać.

Na samym dole znajdziecie kod, który wprowadziłem, a także link do samego repozytorium, na razie testowego, bo mam z tym problem ale o tym dosłownie za chwilę.

Logo Angular 2
Niełatwa bestia.
Problemy:
  1. Pierwszym problemem okazało się, że Komponenty w Angularze 2 (czyli nazwijmy to klocki całej aplikacji) nie stylizują się tak jak ja bym chciał, w tych miejscach co bym myślał, że będą się stylizować.Chodzi o to, że wstawiając komponent td-main-window (td jako prefix by w przyszłości niczego nie namieszać w HTML), powinien być stylowany w main-window-component.css, a tak się nie dzieje. Wiem, że jest coś takiego jak dziedziczenie czy view encapsulation. Więc w takim razie td-main-window powinien się stylować w wyższym (w tym przypadku najwyższym) komponencie – app.component.css – a tak się nie dzieje również. Jedynie zmiany globalne w głównym pliku styles.css działają – ale tak chyba to nie powinno wyglądać. Może, muszę użyć @Output. Jeszcze nie wiem.
  2. Drugim problemem jest git. Nie wiem jak wrzucić repozytorium w takiej formie by działo samo z siebie na Github Pages. Męczyłem się różnymi sposobami i żaden nie daje rezultatu. Wiem też, że takie pliki jak folder node_modules nie powinien się w repo znajdować. Więc na razie, do czasu ogarnięcia tego problemu, pliki będą na testowym repozytorium (link na dole strony) i będzie to jedynie folder src z wszystkimi najważniejszymi plikami.Gdyby nie było problemów – to i co za frajda byłaby z robienia tego projektu. 🙂

 

Trochę zagadnień technicznych:

Czyli pogadanka o kodzie.

Chyba nie ma sensu zaczynać opisu od użytych komend przy tworzeniu projektu Angulara. Więc skupię się na większym ogóle.

Opis ogólny:

Jak na razie stworzyłem dwa komponenty – jeden do menu górnego.
A drugi do głównego okna z zadaniami.
W przyszłości ekran ma być podzielony na 3 sekcje. Menu po lewej z kalendarzem | Główny spis zadań na środku | Bardziej rozszerzony opis po prawej

W header.html użyłem zwykłego menu z Bootstrapa. Zostawiając jak jest.
W app.component.html wstawiłem selektory od headera, potem diva z klasą „main” dającą margines górny, bo inaczej menu by wszystko zasłaniało.
A w tym divie selektor td-main-window. I to właśnie w nim zrobiłem najwięcej (choć wciąż mało).

O main-window.component.ts i .html:
<section id="main">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-md-offset-2 col-md-10">
        	<hr>
			<h1>Hello</h1>
			<h3>Here you can make a new task.</h3>
			<hr>
			<button (click)="makeTask()">Click to make a new task.</button>
			<div id="spaceForTask"></div>
			</div>
		</div>
	</div>
</section>

Jak widzicie powyżej, używam Bootstrapa wszędzie. Ale tutaj ważniejszy jest sam w sobie button i div #spaceForTask.
Na buttonie użyłem property binding na natywnym clicku. A div spełnia rolę miejsca dla zadań. Wszystko się wyjaśnij jak zobaczycie kod JS.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'td-main-window',
  templateUrl: './main-window.component.html',
  styleUrls: ['./main-window.component.css']
})
export class MainWindowComponent implements OnInit {
 
  makeTask() {
    var newTask = document.createElement("input");
    newTask.style.display = "block";
    newTask.className = "task";
    newTask.setAttribute("value", "write your staff");
    newTask.setAttribute("type", "text");
    newTask.onmouseenter = function() {
      newTask.style.border = "2px solid black";  
    };
    newTask.onmouseleave = function() {
      newTask.style.border = "1px solid black";  
    };
    document.getElementById("spaceForTask").appendChild(newTask);
  }

  constructor() { }
  ngOnInit() {
  }

}

Tutaj stworzyłem 3 funkcje. makeTask(), która jak sama wskazuje ma za zadnie tworzenie zadań. I dodałem kilka różnych właściwości, które pewnie i tak zmienię za jakiś czas.
Są jeszcze funkcje na mouseenter i mouseleave – by widzieć focusa na danym zadaniu (pewnie też będzie jakoś do zmiany)

No i na końcu dodaje nowe zadanie przez appendChild do diva o którym wcześniej wspominałem.
Prosty kod JS ale działa.

Zdjęcia poglądowe:
Bez otwartych zadań.
Z otwartymi zadaniami.

/Koniec zagadnień technicznych:

Jak widzicie, dużo tutaj jeszcze nie zrobiłem ale tak jak mówiłem. Uczę się dopiero Angulara 2 i jestem dopiero na dyrektywach.
Jak patrzeć procentowo na czas, to 95% czasu to na razie nauka. A ten kod to jakieś 5% czy mniej.

  1. Następna rzecz do dodania to przycisk do usuwania zadań.
  2. I dodanie drugiego okna do rozszerzenia opisu zadania, który będzie się pojawiał tylko przy danym zadaniu. (może two-way binding na tytuł zadania – jeszcze nie wiem.)
  3. Oraz ogarniecie gita, by inne osoby mogły odpalać sobie demo sami na swoich komputerach, bez potrzeby robienia nowego projektu w Angularze.

Link do testowego repozytorium. W przyszłości się zmieni.

2 KOMENTARZE

ZOSTAW ODPOWIEDŹ

Please enter your comment!
Please enter your name here