• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyświetlanie danych z bazy - TypeScript

0 głosów
36 wizyt
pytanie zadane 13 sierpnia w Inne języki przez Krzys601 Nowicjusz (140 p.)

Witam, mam problem z wypisaniem danych z bazy do mojego plannera nad którym pracuję w wolnym czasie. Chcę aby wypisywał pewną wartość od/do pewnej daty z bazy danych. W tym momencie wypisuje dane od 1 dnia w kalendarzu (tak jak na obrazku nr. 1).

Zatrzymałem się w takim momencie:

buildDaysArray() {
    const daysInMonth = new Date(this.testLast).getDate();
    const dayName = ['Sun', 'Mon', 'Thu', 'Wed', 'Thu', 'Fri', 'Sat'];

    this.days = [];

    for (let i = 1; i <= daysInMonth; i++) {
      const date = new Date(this.testLast.getFullYear(), this.testLast.getMonth(), i);
      this.days.push({ day: i, dayOfWeek: dayName[date.getDay()] });
    }

    // tslint:disable-next-line:prefer-for-of
    for (let iWorker = 0; iWorker < this.workerList.length; iWorker++) {

    this.workerList[iWorker].days = [];

    this.dateWorkerService.getWoker(this.workerList[iWorker].id).subscribe(posts => {

      console.log('testowo22');
      console.log(posts);
      console.log(posts.changeWork);

      const w: DateWork = ({
        startWork: this.StartWork,
        endWork: this.EndWork,
      });

      // tslint:disable-next-line:max-line-length
      this.test = this.workerList[iWorker].days[this.dataWorkerList[iWorker].id - 1].value = this.dataWorkerList[iWorker].changeWork;

      for ( const start = w.startWork; start < w.endWork; start.setDate(start.getDate() + 1)) {

      }
    });

    for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(this.testLast.getFullYear(), this.testLast.getMonth(), i);
        this.workerList[iWorker].days.push({ day: i, dayOfWeek: dayName[date.getDay()], fullDate: date, value: this.test });
      }
    }
  }

Wartości dodawane do tablicy to, wartość wyświetlana, użytkownik przy którym ma to być wyświetlane pozyskiwany z innej tablicy, data od - do (tak jak na rysunku nr. 2).

Czy ktoś mógłby doradzić, czy coś robię źle lub czy mógłbym zrobić lepiej, ponieważ stanąłem w martwym punkcie? 

1 odpowiedź

0 głosów
odpowiedź 13 sierpnia przez pawi125 Stary wyjadacz (12,630 p.)

Żeby zaciągać dane z bazy danych, która jest lokalizowana poza aplikacja w angularze potrzebujesz pobawic sie httpClientem

komentarz 13 sierpnia przez Krzys601 Nowicjusz (140 p.)
Może źle ująłem moje powyższe pytanie. Symbole "D" i "N" są już wyciągane z bazy. Daty od - do też potrafię wyciągnąć i są to "startWork" i "endWork", które widać w pętli for. Mam jednak problem aby powyższe symbole wskakiwały od daty startWork i kończyły się na dacie endWork.
komentarz 13 sierpnia przez pawi125 Stary wyjadacz (12,630 p.)

OK, probowałes tego dokona w tym http (co wyzej) w metodzie 

http.get<...>(...)
     .pipe(
        .tap(values=>{
             //tutaj przypisz sobie te dane do jakiegos service
          }) 
     )

 

komentarz 13 sierpnia przez Krzys601 Nowicjusz (140 p.)
Przepraszam, ale nie bardzo rozumiem :(
komentarz 13 sierpnia przez pawi125 Stary wyjadacz (12,630 p.)
Pokaz kod za pomoca ktorego pobierasz dane z bazy
komentarz 13 sierpnia przez Krzys601 Nowicjusz (140 p.)

Serwis:

export class DateWorkService {

  //dateWorkList: DateWork[] = [];

  allPost$: Observable<Array<DateWork>>;

  constructor(private http: HttpClient) { }

  addWorker(dateWorker: DateWork): Observable<DateWork> {
    return this.http.post<DateWork>('http://localhost:8080/api/datework', dateWorker);
  }

  getWokers(): Observable<Array<DateWork>> {
    return this.http.get<Array<DateWork>>('http://localhost:8080/api/datework/all');
  }

  getWoker(id: number): Observable<DateWork> {
    return this.http.get<DateWork>('http://localhost:8080/api/datework?index=' + id);
  }

  editWorkers(dateWorker: DateWork) {
    return this.http.patch('http://localhost:8080/api/datework' + dateWorker.id, dateWorker);
  }
}

Później zrobiłem sobie dwie przykładowe tablice które łącze w GET:
 

workerList = [
    {
      id: 1,
      name: 'asdf1',
      days: [],
      thisWorker: 'test'
    },
    {
      id: 2,
      name: 'asdf2',
      days: [],
      thisWorker: 'test2'
    },
  ];

  dataWorkerList = [
    {
      id: 1,
      changeWork: 'string',
      startWork: new Date(),
      endWork: new Date(),
      test: 'string',
      thisWorker: 'string',
    }
  ];
 getWorkers() {
    this.workerService.getWokers().subscribe(posts => {
      console.log(posts);
      this.workerList$ = this.workerService.getWokers();

      this.workerList = [];

      this.workerList$.subscribe((data) => {
        for (const worker of data) {
          this.workerList.push({
            id: worker.id,
            name: worker.firstName + ' ' + worker.lastName,
            days: [],
            thisWorker: worker.firstName
          });
        }
        this.buildDaysArray();
        console.log(this.workerList);
      });

    });
  }

  getDataWorkers() {
    this.dateWorkerService.getWokers().subscribe(posts => {
      console.log(posts);
      this.dateWorker$ = this.dateWorkerService.getWokers();

      this.dataWorkerList = [];

      this.dateWorker$.subscribe((data) => {
        for (const worker of data) {
          this.dataWorkerList.push({
            id: worker.id,
            changeWork: worker.changeWork,
            startWork: worker.startWork,
            endWork: worker.endWork,
            test: worker.test,
            thisWorker: worker.thisWorker
          });
        }
        this.buildDaysArray();
        console.log(this.dataWorkerList);
      });

    });
  }

W razie czego poniżej wstawiam całą klasę:

export class SchedulerComponent implements OnInit {

  // Tworzenie data top
  // myDate = Date.now();
  test: string;

  date = new Date();
  firstDay = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
  lastDay = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0);

  testFirst: Date;
  testLast: Date;

  firstDate = this.firstDay;
  lastDate = this.lastDay;

  testDate = new Date(this.date.getMonth());

  workerList$: Observable<Array<Workers>>;
  dateWorker$: Observable<Array<DateWork>>;
  ChangeWork: string;
  StartWork: Date;
  EndWork: Date;

  get WorkerList() {
    return this.workerService.getAllWorkers();
  }

  get dateList() {
    return this.dateWorkerService.getWokers();
  }

  workerList = [
    {
      id: 1,
      name: 'asdf1',
      days: [],
      thisWorker: 'test'
    },
    {
      id: 2,
      name: 'asdf2',
      days: [],
      thisWorker: 'test2'
    },
  ];

  dataWorkerList = [
    {
      id: 1,
      changeWork: 'string',
      startWork: new Date(),
      endWork: new Date(),
      test: 'string',
      thisWorker: 'string',
    }
  ];



  days = [];

  // new window
  isPopupOpened = true;

  constructor(private dialog?: MatDialog, private workerService?: WorkerService,
              private dateWorkerService?: DateWorkService) { }

  ngOnInit() {
    this.testFirst = new Date(this.firstDay.setMonth(this.firstDay.getMonth(), 1));
    this.testLast = new Date(this.lastDay.setMonth(this.lastDay.getMonth() + 1, 0));
    this.getWorkers();
    this.getDataWorkers();
  }

  getWorkers() {
    this.workerService.getWokers().subscribe(posts => {
      console.log(posts);
      this.workerList$ = this.workerService.getWokers();

      this.workerList = [];

      this.workerList$.subscribe((data) => {
        for (const worker of data) {
          this.workerList.push({
            id: worker.id,
            name: worker.firstName + ' ' + worker.lastName,
            days: [],
            thisWorker: worker.firstName
          });
        }
        this.buildDaysArray();
        console.log(this.workerList);
      });

    });
  }

  getDataWorkers() {
    this.dateWorkerService.getWokers().subscribe(posts => {
      console.log(posts);
      this.dateWorker$ = this.dateWorkerService.getWokers();

      this.dataWorkerList = [];

      this.dateWorker$.subscribe((data) => {
        for (const worker of data) {
          this.dataWorkerList.push({
            id: worker.id,
            changeWork: worker.changeWork,
            startWork: worker.startWork,
            endWork: worker.endWork,
            test: worker.test,
            thisWorker: worker.thisWorker
          });
        }
        this.buildDaysArray();
        console.log(this.dataWorkerList);
      });

    });
  }


  nextMonth() {
    this.firstDate = null;
    this.lastDate = null;
    this.testFirst = new Date(this.firstDay.setMonth(this.firstDay.getMonth() + 1));
    this.testLast = new Date(this.lastDay.setMonth(this.lastDay.getMonth() + 2, 0));

    this.buildDaysArray();
  }

  backMonth() {
    this.firstDate = null;
    this.lastDate = null;
    this.testFirst = new Date(this.firstDay.setMonth(this.firstDay.getMonth() - 1));
    this.testLast = new Date(this.lastDay.setMonth(this.lastDay.getMonth() - 0, 0));

    this.buildDaysArray();
  }

  buildDaysArray() {
    const daysInMonth = new Date(this.testLast).getDate();
    const dayName = ['Sun', 'Mon', 'Thu', 'Wed', 'Thu', 'Fri', 'Sat'];

    this.days = [];

    for (let i = 1; i <= daysInMonth; i++) {
      const date = new Date(this.testLast.getFullYear(), this.testLast.getMonth(), i);
      this.days.push({ day: i, dayOfWeek: dayName[date.getDay()] });
    }

    // tslint:disable-next-line:prefer-for-of
    for (let iWorker = 0; iWorker < this.workerList.length; iWorker++) {

    this.workerList[iWorker].days = [];

    this.dateWorkerService.getWoker(this.workerList[iWorker].id).subscribe(posts => {

      console.log('testowo22');
      console.log(posts);
      console.log(posts.changeWork);

      const w: DateWork = ({
        startWork: this.StartWork,
        endWork: this.EndWork,
      });

      // tslint:disable-next-line:max-line-length
      this.test = this.workerList[iWorker].days[this.dataWorkerList[iWorker].id - 1].value = this.dataWorkerList[iWorker].changeWork;

      for ( const start = w.startWork; start < w.endWork; start.setDate(start.getDate() + 1)) {

      }
    });

    for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(this.testLast.getFullYear(), this.testLast.getMonth(), i);
        this.workerList[iWorker].days.push({ day: i, dayOfWeek: dayName[date.getDay()], fullDate: date, value: this.test });
      }
      // if
      // wyciagnij dane start-end z bazy dla tego workera
        // dla kazdej daty - for od - do - i ustawienie zamiast N coś innego
    }
  }

  /* getWorkers() {
    this.workerService.getWokers().subscribe(posts => {
      console.log(posts);
      this.allWorkers$ = this.workerService.getWokers();
    }); */

  testPost() {
    const p: DateWork = ({
      id: 1,
      changeWork: 'test',
    });
    this.dateWorkerService.editWorkers(p).subscribe(post => {
      console.log(post);
    });
  }

  getDateWorker() {
    this.dateWorkerService.getWoker(1).subscribe(posts => {
      console.log(' test wypisania ');
      console.log(posts);
      // this.dateWorker$ = this.dateWorkerService.getWokers();
    });
  }

  todayMonth() {
    this.firstDate = null;
    this.lastDate = null;
    this.testFirst = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
    this.testLast = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0);

    this.buildDaysArray();
  }

  onClick(event, worker, day) {
    console.log(worker);
    console.log(day);

    this.isPopupOpened = true;
    const dialogRef = this.dialog.open(AddSchedulerComponent, {
      data: {
        worker, day
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      this.isPopupOpened = false;
    });
  }
}

 

komentarz 13 sierpnia przez pawi125 Stary wyjadacz (12,630 p.)
Nie rozumiem kompletnie co u Ciebie jest czym.

Generalnie tobie chodzi o metode ktora przyjmie start i koniec za argumenty i w srodku wykona petle ktora przeleci przez wszystkie dni z tego zakresu. Nastepnie kazdemu dniu przypisze czy jest D czy N (co to wgl znaczy?) wedlug jakiegos algorytmu?
komentarz 13 sierpnia przez Krzys601 Nowicjusz (140 p.)

Dokładnie do czegoś takiego dążę. W tej chwili tutaj:

this.dateWorkerService.getWoker(this.workerList[iWorker].id).subscribe(posts => {

      console.log('testowo22');
      console.log(posts);
      console.log(posts.changeWork);

      const w: DateWork = ({
        startWork: this.StartWork,
        endWork: this.EndWork,
      });

      // tslint:disable-next-line:max-line-length
      this.test = this.workerList[iWorker].days[this.dataWorkerList[iWorker].id - 1].value = this.dataWorkerList[iWorker].changeWork;

      for ( const start = w.startWork; start < w.endWork; start.setDate(start.getDate() + 1)) {

      }
    });

lecę po tablicy i wypisuje tablice worker po lewej stronie. Do każdego od razu przypisywany jest timeline.

Tutaj:

this.test = this.workerList[iWorker].days[this.dataWorkerList[iWorker].id - 1].value = this.dataWorkerList[iWorker].changeWork;

zamiast "this.dataWorkerList[iWorker].id" chciałem dać startWork aby wstawiany symbol wskakiwał do pierwszej daty jednak nie mogę tak zrobić i w tym momenci leci po id dodając za każdym razem nowemu workerowi.

Później chciałem zrobić pętlę, która jak wspomniałeś ma przelecieć po wszystkich datach. Wykrobałem coś takiego ale nie wiem czy dobrze myślę:

for ( const start = w.startWork; start < w.endWork; start.setDate(start.getDate() + 1)) {

      }

Jeśli chodzi o to co znaczą D i N to po prosty jest oznaczenie dzień i noc. Jestem początkujący w angularze i po zrobieniu paru prostych aplikacji chciałem zrobić coś praktycznego. Wtedy kolega podsunął mi pomysł żebym zrobił mu prosty grafik kiedy ma dniówki a kiedy nocki :)  

Podobne pytania

0 głosów
1 odpowiedź 365 wizyt
pytanie zadane 8 sierpnia 2017 w JavaScript, jQuery, AJAX przez Perkos Początkujący (290 p.)
0 głosów
1 odpowiedź 77 wizyt
pytanie zadane 31 marca w Inne języki przez Akiro Bywalec (2,810 p.)
0 głosów
1 odpowiedź 54 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

65,728 zapytań

112,369 odpowiedzi

237,231 komentarzy

46,688 pasjonatów

Przeglądających: 181
Pasjonatów: 4 Gości: 177

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...