new project

angular.json

 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": "5bb832c2-d48f-4b6b-926d-c403acd19c4f"
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -27,9 +30,15 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "src/persian-datepicker-0.4.5.min.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "src/persian-datepicker-0.4.5.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/jquery/dist/jquery.min.js"
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -10,6 +10,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-persian/material-date-picker": "^1.8.1",
     "@angular/animations": "~12.0.3",
     "@angular/common": "~12.0.3",
     "@angular/compiler": "~12.0.3",
@@ -18,6 +19,12 @@
     "@angular/platform-browser": "~12.0.3",
     "@angular/platform-browser-dynamic": "~12.0.3",
     "@angular/router": "~12.0.3",
+    "bootstrap": "^5.0.0-beta3",
+    "jalali-moment": "^3.3.10",
+    "jquery": "^3.6.0",
+    "moment-jalaali": "^0.9.1",
+    "ng-persian-datepicker": "^2.4.0",
+    "ng2-jalali-date-picker": "^2.2.8",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"
@@ -27,6 +34,7 @@
     "@angular/cli": "~12.0.3",
     "@angular/compiler-cli": "~12.0.3",
     "@types/jasmine": "~3.6.0",
+    "@types/moment-jalaali": "^0.7.4",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.7.0",
     "karma": "~6.3.0",

src/app/ISick.ts

+export interface iSick{
+  id:number;
+  name:string;
+  lastname:string;
+  tel:string;
+  email:string;
+  typeq:string;
+  locationq:string;
+  dec:string;
+  state:number;
+  date:string;
+  dateq:string;
+  perioddate:string;
+  created_at:string;
+  updated_at:string;
+}

src/app/admin/admin.component.html

+<div class="container-fluid" dir="rtl" style="font-family: iransans;">
+  <div class="row">
+    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+      <div class="position-sticky pt-3">
+        <ul class="nav flex-column">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">
+              <span data-feather="home"></span>
+              بیماران
+            </a>
+
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">
+              <span data-feather="file"></span>
+              پزشک
+            </a>
+          </li>
+
+        </ul>
+      </div>
+    </nav>
+    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+      <div
+        class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+        <h1 class="h2">بیماران</h1>
+
+        <div class="btn-toolbar mb-2 mb-md-0">
+          <div class="btn-group me-2">
+            <a (click)="chengStateEnd()" class="btn btn-sm btn-outline-secondary">تمام شده</a>
+            <a (click)="chengStateOk()" class="btn btn-sm btn-outline-secondary">تایید شده</a>
+            <a (click)="chengStateNew()" class="btn btn-sm btn-outline-secondary">جدید</a>
+          </div>
+        </div>
+      </div>
+    <ng-container [ngSwitch]=State>
+      <app-panel-new *ngSwitchCase=1></app-panel-new>
+      <app-panel-ok *ngSwitchCase=2></app-panel-ok>
+      <app-panel-end *ngSwitchCase=3></app-panel-end>
+    </ng-container>
+
+    </main>
+  </div>
+</div>

src/app/admin/admin.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+
+describe('AdminComponent', () => {
+  let component: AdminComponent;
+  let fixture: ComponentFixture<AdminComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AdminComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/admin.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.css'],
+})
+export class AdminComponent implements OnInit {
+  State: number = 1;
+  constructor() {}
+  chengStateEnd() {
+    this.State = 3;
+  }
+  chengStateNew() {
+    this.State = 1;
+  }
+  chengStateOk() {
+    this.State = 2;
+  }
+  ngOnInit(): void {
+    this.State = 1;
+  }
+}

src/app/admin/panel-end/panel-end.component.html

+
+<div class="table-responsive">
+  <table class="table table-striped table-sm text-center">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>نام</th>
+        <th>نام خانوادگی</th>
+        <th>شماره همراه</th>
+        <th>نوع درخواست</th>
+        <th>مکان </th>
+        <th>تاریخ درخواست </th>
+        <th> نوبت </th>
+        <th>وضعیت</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="" *ngFor="let item of sicks;let i=index">
+        <ng-container *ngIf="item.state==3">
+          <td>{{i+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.lastname}}</td>
+          <td>{{item.tel}}</td>
+          <td>
+            <ng-container [ngSwitch]="item.typeq">
+              <p *ngSwitchCase="'1'">ویزیت</p>
+              <p *ngSwitchCase="'2'">مشاور</p>
+              <p *ngSwitchCase="'3'">موارددیگر</p>
+            </ng-container>
+          </td>
+          <td>
+            <ng-container [ngSwitch]="item.locationq">
+              <p *ngSwitchCase="'1'">مطب 1</p>
+              <p *ngSwitchCase="'2'">مطب 2</p>
+              <p *ngSwitchCase="'3'">مطب 3</p>
+            </ng-container>
+          </td>
+          <td dir="rtl">{{item.date}}</td>
+          <td>
+            {{item.dateq}}
+          </td>
+          <td><button type="button" class="btn btn-danger" (click)="chengeState(item.id)">حذف  </button></td>
+        </ng-container>
+      </tr>
+    </tbody>
+  </table>
+</div>

src/app/admin/panel-end/panel-end.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PanelEndComponent } from './panel-end.component';
+
+describe('PanelEndComponent', () => {
+  let component: PanelEndComponent;
+  let fixture: ComponentFixture<PanelEndComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PanelEndComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PanelEndComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/panel-end/panel-end.component.ts

+import { ServerService } from './../../server.service';
+import { iSick } from './../../ISick';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-panel-end',
+  templateUrl: './panel-end.component.html',
+  styleUrls: ['./panel-end.component.css']
+})
+export class PanelEndComponent implements OnInit {
+  sicks: Array<iSick> = [];
+  constructor(private http: ServerService) { }
+  chengeState(id: number) {
+    this.http.chengeItem(id).subscribe((data) => (this.sicks = data));
+  }
+  ngOnInit(): void {
+    this.http.getItem().subscribe((date) => (this.sicks = date));
+  }
+
+}

src/app/admin/panel-new/panel-new.component.html

+<div class="table-responsive">
+  <table class="table table-striped table-sm text-center">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>نام</th>
+        <th>نام خانوادگی</th>
+        <th>شماره همراه</th>
+        <th>نوع درخواست</th>
+        <th>مکان </th>
+        <th>تاریخ درخواست </th>
+        <th> زمان نوبت </th>
+        <th>رزرو نوبت </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="" *ngFor="let item of sicks;let i=index">
+        <ng-container *ngIf="item.state==1">
+          <td>{{i+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.lastname}}</td>
+          <td>{{item.tel}}</td>
+          <td>
+            <ng-container [ngSwitch]="item.typeq">
+              <p *ngSwitchCase="'1'">ویزیت</p>
+              <p *ngSwitchCase="'2'">مشاور</p>
+              <p *ngSwitchCase="'3'">موارددیگر</p>
+            </ng-container>
+          </td>
+          <td>
+            <ng-container [ngSwitch]="item.locationq">
+              <p *ngSwitchCase="'1'">مطب 1</p>
+              <p *ngSwitchCase="'2'">مطب 2</p>
+              <p *ngSwitchCase="'3'">مطب 3</p>
+            </ng-container>
+          </td>
+          <td dir="rtl">{{item.date}}</td>
+          <td>
+            <p *ngIf="item.perioddate=='0'">
+             🚨 اولین زمان خالی
+            </p>
+            <p *ngIf="item.perioddate !='0'"> 🕐 {{item.perioddate}}</p>
+          </td>
+          <td>
+            <input type="hidden" name="ids" value={{item.id}} #ids />
+            <input type="text" #datepickerInput name="datet" />
+            <ng-persian-datepicker [uiAutoPosition]=true [input]="datepickerInput" [uiTheme]="'dark'"
+              [timeMeridian]="true"  [dateFormat]="'jYYYY/jMM/jDD HH:mm'">
+            </ng-persian-datepicker>
+            <button type="submit" class="btn btn-success"
+              (click)="subForm(datepickerInput.value,ids.value)">ثبت</button>
+          </td>
+        </ng-container>
+      </tr>
+    </tbody>
+
+  </table>
+</div>

src/app/admin/panel-new/panel-new.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PanelNewComponent } from './panel-new.component';
+
+describe('PanelNewComponent', () => {
+  let component: PanelNewComponent;
+  let fixture: ComponentFixture<PanelNewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PanelNewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PanelNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/panel-new/panel-new.component.ts

+import { ServerService } from './../../server.service';
+import { iSick } from './../../ISick';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-panel-new',
+  templateUrl: './panel-new.component.html',
+  styleUrls: ['./panel-new.component.css']
+})
+export class PanelNewComponent implements OnInit {
+
+  sicks: Array<iSick> = [];
+  ids: string = '';
+
+  constructor(private http: ServerService) {}
+
+  subForm(date:string,id:string) {
+    let datet={
+      id:id,
+      date:date
+    }
+    this.http.setQ(datet).subscribe((date) => (this.sicks = date));
+}
+  chengeState(id: number) {
+    this.http.chengeItem(id).subscribe((data) => (this.sicks = data));
+  }
+  ngOnInit(): void {
+    this.http.getItem().subscribe((date) => (this.sicks = date));
+  }
+}

src/app/admin/panel-ok/panel-ok.component.html

+<div class="main-box-shadow col-12 p-2 mb-md-5" dir="rtl">
+  <div class="row">
+    <div class="col-5">
+      <div class="mb-3 row ">
+        <label class="col-2 col-form-label">از تاریخ</label>
+        <div class="col-4">
+          <input class="form-control " type="text" #datepickerInput />
+          <ng-persian-datepicker [uiAutoPosition]=true [dateFormat]="'jYYYY/jMM/jDD'" [input]="datepickerInput"
+            [uiTheme]="'blue'" [timeMeridian]="false" [timeEnable]="false">
+          </ng-persian-datepicker>
+        </div>
+        <label class="col-2 col-form-label">تا تاریخ</label>
+        <div class="col-4">
+          <input class="form-control "  type="text" #datepickerInput2>
+          <ng-persian-datepicker
+           [uiAutoPosition]=true
+            [dateFormat]="'jYYYY/jMM/jDD'"
+            [input]="datepickerInput2"
+            [uiTheme]="'black'"
+            [timeMeridian]="true"
+            [timeEnable]="false">
+          </ng-persian-datepicker>
+        </div>
+      </div>
+    </div>
+    <div class="col-5">
+      <div class="row">
+        <label class="col-2 col-form-label">نوع </label>
+        <div class="col-4">
+          <select class="form-select" [(ngModel)]="selectedType" aria-label="Default select example">
+
+            <option [ngValue]="1"> ویزیت</option>
+            <option [ngValue]="2"> مشاوره</option>
+            <option [ngValue]="3"> موارد دیگر</option>
+          </select>
+        </div>
+        <label class="col-2 col-form-label">مکان </label>
+        <div class="col-4">
+          <select class="form-select" [(ngModel)]="selectedLocation" aria-label="Default select example">
+            <option [ngValue]="1">مطب 1</option>
+            <option [ngValue]="2">مطب 2</option>
+            <option [ngValue]="3">مطب 3</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="col-1">
+      <div class="" dir="ltr">
+        <div class="form-check">
+          <label class="form-check-label" for="flexCheckDefault">
+            ق.ظ
+          </label>
+          <input class="form-check-input" type="checkbox" value="" (click)="isCheckAm($event)" name="am" id="َam">
+
+        </div>
+        <div class="form-check">
+          <label class="form-check-label" for="flexCheckChecked">
+            ب.ظ
+          </label>
+          <input class="form-check-input" type="checkbox" value="" (click)="isCheckPm($event)" id="pm" name="pm">
+        </div>
+      </div>
+    </div>
+    <div class="col-1">
+      <button class="btn btn-primary" type="button"
+      (click)="srhDate(datepickerInput.value,datepickerInput2.value)">اعمال</button>
+    </div>
+  </div>
+</div>
+
+<div class="table-responsive">
+
+  <table class="table table-striped table-sm text-center" id="tableID">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>نام</th>
+        <th>نام خانوادگی</th>
+        <th>شماره همراه</th>
+        <th>نوع درخواست</th>
+        <th>مکان </th>
+        <th>تاریخ درخواست </th>
+        <th> نوبت </th>
+        <th>تغیر وضعیت </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="" *ngFor="let item of sicks;let i=index">
+        <ng-container *ngIf="item.state==2">
+        <td>{{i+1}}</td>
+        <td>{{item.name}}</td>
+        <td>{{item.lastname}}</td>
+        <td>{{item.tel}}</td>
+        <td>
+          <ng-container [ngSwitch]="item.typeq">
+            <p *ngSwitchCase="'1'">ویزیت</p>
+            <p *ngSwitchCase="'2'">مشاور</p>
+            <p *ngSwitchCase="'3'">موارددیگر</p>
+          </ng-container>
+        </td>
+        <td>
+          <ng-container [ngSwitch]="item.locationq">
+            <p *ngSwitchCase="'1'">مطب 1</p>
+            <p *ngSwitchCase="'2'">مطب 2</p>
+            <p *ngSwitchCase="'3'">مطب 3</p>
+          </ng-container>
+        </td>
+        <td dir="rtl">{{item.date}}</td>
+        <td>
+          {{item.dateq}}
+        </td>
+        <td><button type="button" class="btn btn-info" (click)="chengeState(item.id)">انجام شده </button></td>
+      </ng-container>
+      </tr>
+    </tbody>
+
+  </table>
+</div>

src/app/admin/panel-ok/panel-ok.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PanelOkComponent } from './panel-ok.component';
+
+describe('PanelOkComponent', () => {
+  let component: PanelOkComponent;
+  let fixture: ComponentFixture<PanelOkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PanelOkComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PanelOkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/panel-ok/panel-ok.component.ts

+import { DOCUMENT } from '@angular/common';
+import { ServerService } from './../../server.service';
+import { iSick } from './../../ISick';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-panel-ok',
+  templateUrl: './panel-ok.component.html',
+  styleUrls: ['./panel-ok.component.css'],
+})
+export class PanelOkComponent implements OnInit {
+  sicks: any[] = [];
+  Am: boolean = false;
+  Pm: boolean = false;
+  ids: string = '';
+
+  selectedType: any = 1;
+  selectedLocation: any = 1;
+  constructor(private http: ServerService) {}
+
+  isCheckAm(check: any) {
+    if (check.target.checked) {
+      this.Am = true;
+    } else {
+      this.Am = false;
+    }
+  }
+  isCheckPm(check: any) {
+    if (check.target.checked) {
+      this.Pm = true;
+    } else {
+      this.Pm = false;
+    }
+  }
+
+  chengeState(id: number) {
+    this.http.chengeItem(id).subscribe((data) => (this.sicks = data));
+  }
+
+  srhDate(date1: string, date2: string) {
+    this.sicks = [];
+    let dateStr = [];
+    let timeStr = [];
+
+    this.http.getItem().subscribe((date) => {
+      for (let i = 0; i < date.length; i++) {
+        if (date[i].state == 2) {
+          if (
+            date[i].locationq == this.selectedLocation &&
+            date[i].typeq == this.selectedType
+          ) {
+
+            let index = date[i].dateq.indexOf(' ');
+            dateStr[i] = date[i].dateq.slice(0, index);
+            timeStr[i] = date[i].dateq.slice(index + 1, 13);
+            if (
+              dateStr[i].toString() >= date1.toString() &&
+              dateStr[i].toString() <= date2.toString()
+            ) {
+              if (this.Am && timeStr[i] >= 0 && timeStr[i] <= 11) {
+                this.sicks.push(date[i]);
+              }
+              if (this.Pm && timeStr[i] >= 12 && timeStr[i] <= 23) {
+                this.sicks.push(date[i]);
+              }
+              if (!this.Am && !this.Pm) {
+                this.sicks.push(date[i]);
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.http.getItem().subscribe((date) => {
+      for (let i = 0; i < date.length; i++) {
+        if (date[i].state == 2) {
+          this.sicks.push(date[i]);
+        }
+      }
+    });
+  }
+}