• 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

VPS Starter Arubacloud
0 głosów
419 wizyt
pytanie zadane 13 sierpnia 2019 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 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

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

komentarz 13 sierpnia 2019 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 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 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 2019 przez Krzys601 Nowicjusz (140 p.)
Przepraszam, ale nie bardzo rozumiem :(
komentarz 13 sierpnia 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
Pokaz kod za pomoca ktorego pobierasz dane z bazy
komentarz 13 sierpnia 2019 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 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 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 2019 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ź 287 wizyt
pytanie zadane 26 lipca 2020 w Inne języki przez matiibal Użytkownik (620 p.)
0 głosów
1 odpowiedź 218 wizyt
pytanie zadane 25 kwietnia 2023 w HTML i CSS przez TheDarkSide Użytkownik (930 p.)
0 głosów
1 odpowiedź 1,292 wizyt
pytanie zadane 8 sierpnia 2017 w JavaScript przez Perkos Początkujący (290 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...