DEV Community: timsar2

Hide node_module from side menu of vscode

timsar2 — Sat, 09 Oct 2021 07:58:06 +0000

Most of the time we don't' need to look at node_module, But sometimes we see that folder is opened and we just need to collapse it again.

There is a vscode extension for hiding file and folders from the context menu. Just right click on file/folder and make them hide.
https://marketplace.visualstudio.com/items?itemName=chrisbibby.hide-node-modules

Be happy now ;)

Create DatePicker By TailWindCss + Angular

timsar2 — Sun, 26 Sep 2021 20:44:07 +0000

Hello friends,
Tailwind Elements has good Collection of free, popular components like modal, dropdown and many more.
https://tailwind-elements.com/docs/standard/forms/datepicker/

It has a DatePicker made by Tailwindcss and alpine js.
I just rebuild that by angular instead of alpine js

Just Show The code :D

First add TailWindCss to your project:
https://www.npmjs.com/package/@ngneat/tailwind

date-picker.component.ts:



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

@Component({
  selector: 'app-DatePicker',
  templateUrl: './date-picker.html'
})
export class DatePickerComponent implements OnInit {
  MONTH_NAMES = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ];
  DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  showDatepicker = false;
  datepickerValue!: string;
  month!: number; // !: mean promis it will not be null, and it will definitely be assigned
  year!: number;
  no_of_days = [] as number[];
  blankdays = [] as number[];

  constructor() {}

  ngOnInit(): void {
    this.initDate();
    this.getNoOfDays();
  }

  initDate() {
    let today = new Date();
    this.month = today.getMonth();
    this.year = today.getFullYear();
    this.datepickerValue = new Date(this.year, this.month, today.getDate()).toDateString();
  }

  isToday(date: any) {
    const today = new Date();
    const d = new Date(this.year, this.month, date);
    return today.toDateString() === d.toDateString() ? true : false;
  }

  getDateValue(date: any) {
    let selectedDate = new Date(this.year, this.month, date);
    this.datepickerValue = selectedDate.toDateString();
    this.showDatepicker = false;
  }

  getNoOfDays() {
    const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();

    // find where to start calendar day of week
    let dayOfWeek = new Date(this.year, this.month).getDay();
    let blankdaysArray = [];
    for (var i = 1; i <= dayOfWeek; i++) {
      blankdaysArray.push(i);
    }

    let daysArray = [];
    for (var i = 1; i <= daysInMonth; i++) {
      daysArray.push(i);
    }

    this.blankdays = blankdaysArray;
    this.no_of_days = daysArray;
  }

  trackByIdentity = (index: number, item: any) => item;
}

date-picker.component.html:



<div class="flex items-center justify-center bg-gray-200 h-full">
  <div class="antialiased sans-serif">
    <div>
      <div class="container mx-auto px-4 py-2 md:py-10">
        <div class="mb-5 w-64">
          <label for="datepicker" class="font-bold mb-1 text-gray-700 block">Select Date</label>
          <div class="relative">
            <input type="hidden" name="date" x-ref="date" />
            <input
              type="text"
              readonly
              [(ngModel)]="datepickerValue"
              (click)="showDatepicker = !showDatepicker"
              (keydown.escape)="showDatepicker = false"
              class="
                w-full
                pl-4
                pr-10
                py-3
                leading-none
                rounded-lg
                shadow-sm
                focus:outline-none focus:shadow-outline
                text-gray-600
                font-medium
              "
              placeholder="Select date"
            />

            <div class="absolute top-0 right-0 px-3 py-2">
              <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
            </div>

            <!-- <div {{no_of_days.length"></div>
                            <div {{32 - new Date(year, month, 32).getDate()"></div>
                            <div {{new Date(year, month).getDay()"></div> -->
            <div
              class="bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0"
              style="width: 17rem"
              [hidden]="!showDatepicker"
              (keydown.away)="showDatepicker = false"
            >
              <div class="flex justify-between items-center mb-2">
                <div>
                  <span class="text-lg font-bold text-gray-800">{{ MONTH_NAMES[month] }}</span>
                  <span class="ml-1 text-lg text-gray-600 font-normal">{{ year }}</span>
                </div>
                <div>
                  <button
                    type="button"
                    class="
                      transition
                      ease-in-out
                      duration-100
                      inline-flex
                      cursor-pointer
                      hover:bg-gray-200
                      p-1
                      rounded-full
                    "
                    [ngClass]="{ 'cursor-not-allowed opacity-25': month === 0 }"
                    [disabled]="month === 0 ? true : false"
                    (click)="month = month - 1"
                    (click)="getNoOfDays()"
                  >
                    <svg
                      class="h-6 w-6 text-gray-500 inline-flex"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                  </button>
                  <button
                    type="button"
                    class="
                      transition
                      ease-in-out
                      duration-100
                      inline-flex
                      cursor-pointer
                      hover:bg-gray-200
                      p-1
                      rounded-full
                    "
                    [ngClass]="{ 'cursor-not-allowed opacity-25': month === 11 }"
                    [disabled]="month === 11 ? true : false"
                    (click)="month = month + 1"
                    (click)="getNoOfDays()"
                  >
                    <svg
                      class="h-6 w-6 text-gray-500 inline-flex"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                  </button>
                </div>
              </div>

              <div class="flex flex-wrap mb-3 -mx-1">
                <ng-container *ngFor="let day of DAYS; let index = index">
                  <div style="width: 14.26%" class="px-1">
                    <div class="text-gray-800 font-medium text-center text-xs">{{ day }}</div>
                  </div>
                </ng-container>
              </div>

              <div class="flex flex-wrap -mx-1">
                <ng-container *ngFor="let blankday of blankdays">
                  <div style="width: 14.28%" class="text-center border-none p-1 border-transparent text-sm"></div>
                </ng-container>
                <ng-container *ngFor="let date of no_of_days; let dateIndex = index; trackBy: trackByIdentity">
                  <div style="width: 14.28%" class="px-1 mb-1">
                    <div
                      (click)="getDateValue(date)"
                      class="
                        cursor-pointer
                        text-center text-sm
                        rounded-full
                        leading-loose
                        transition
                        ease-in-out
                        duration-100
                      "
                      [ngClass]="{
                        'bg-blue-500 text-white': isToday(date) === true,
                        'text-gray-700 hover:bg-blue-200': isToday(date) === false
                      }"
                    >
                      {{ date }}
                    </div>
                  </div>
                </ng-container>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Finally Import FormsModule in to the your.module.ts



import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    ..., 
    FormsModule
  ]
})

That's it, Save and run 😏

Custom Ionic Animation On Page Transition

timsar2 — Wed, 22 Sep 2021 21:04:43 +0000

Hello,
We want to make animation for ion-content and prevent the ion-header to be animated

let do it fast :D

Create a Directive Module

ionic generate module directive

ionic generate directive page-animation --module directive

This is PageAnimationDirective :

import { Directive, ElementRef } from '@angular/core';
import { createAnimation  } from '@ionic/core';
import { AnimationController } from '@ionic/angular';

@Directive({
  selector: '[appPageAnimation]'
})
export class PageAnimationDirective {

  constructor(private animationCtrl: AnimationController, private el: ElementRef) {
    this.dropIn();
  }

  private dropIn() {
    const animation = createAnimation()
              .addElement(this.el.nativeElement)
              .duration(500)
              .iterations(1)
              .fromTo('transform', 'translateY(-10%)', 'translateY(0%)');
    animation.play();
  }
}

Export PageAnimationDirective from DirectiveModule:

@NgModule({
  declarations: [PageAnimationDirective],
  imports: [
    CommonModule
  ],
  exports: [PageAnimationDirective]
})
export class DirectiveModule { }

Import DirectiveModule to Component.Module.ts of each component you want to be animated like this:

@NgModule({
  imports: [FormsModule, DirectiveModule],
  declarations: [FolderPage]
})

From you component.html add appPageAnimation directive to ion-content:

<ion-content [fullscreen]="true" appPageAnimation>

To Prevent ion-header, tabs, etc.. to be animated on page transition, make animate flag to false from app.module:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    IonicModule.forRoot({ animated: false  }),
    ...
}

Enjoy It :D

Support Dynamic Multiple Columns And Infinity Scroll in Ionic Angular

timsar2 — Mon, 08 Feb 2021 07:20:00 +0000

Hello friends,
In my latest Project, I Found My product list is so large and it’s slow on response. So I was going to use a virtual scroll, But it does not support more than one column or dynamic multiple columns.
So I tried to found a way to make ion-virtual-scroll to support more than one column and maybe dynamic columns.

ion-virtual-scroll has an item list like [items]=”list”, and it’ll iterate over the list. To support multiple columns we must find how many items is in the list and calculate their index, After that we can use virtual-list index to retrieve data from the list.
As you can see below, Extra columns will be added to the virtual list.

Let’s do it!

First Create an ionic angular project and then install faker for mocking data.

ionic start virtual-columns tabs

npm install faker --save
npm install @types/faker --save

inside your .ts file import faker

import * as faker from 'faker';

Get List of Data from faker package:

getEmployees() {
    for (let i = 0; i < 250; i++) {
      this.dataList.push({
        id: this.dataList.length,
        image: faker.image.image(),
        name: faker.name.firstName(),
        address: faker.address.streetAddress(),
        intro: faker.lorem.words()
      });
    }
    // for triggering pipe when data source changed //
    this.nextPipe = this.dataList.length;
  }

Listen to Screen resize and calculate how many extra column must add to the list:

@HostListener('window:resize', ['$event'])
  getScreenSize(event?) {
    this.screenWidth = window.innerWidth;
    this.exteraCol = Math.trunc(this.screenWidth / this.vColMinWidth) -1;
    this.exteraCol = this.exteraCol < 0 ? 0 : this.exteraCol;
    this.exteraCol = this.exteraCol > 3 ? 3 : this.exteraCol; // if we want to have max virtual column count
  }

Import virtualScroll and infinity ViewChild to .ts file, To detect and manage when scroll touch end.

export class Tab3Page {
  @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
...

Make it infinity scroll:

loadData(event: any) {
    setTimeout(() => {

      // load more data
      this.getEmployees();
      this.virtualScroll.checkEnd();  // trigger end of virtual list
      event.target.complete();

      if (this.dataList.length === 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

We must to know Min Width of virtual columns, so set vColMinWidth as much as you need.

For me it is vColMinWidth = 360;

Generate a pipe with ionic cli command

ionic generate pipe pipes/virtual-list-index

Add VirtualListIndexPipe to PipesModule
Fetch item’s index of dataList with pipe like this:

export class VirtualListIndexPipe implements PipeTransform {

  transform(array: Array<any>, exteraCol: number, nextPipe: number): number[][] {
    const range = (s: number, e: number) => e > s ? [s, ...range(s + 1, e)] : [s];
    const virtualList = [] as number[][];

    let i = 0;
    for (i; i < (array.length - exteraCol); i += exteraCol + 1){
      virtualList.push([...range(i, i + exteraCol)]);
    }
    // last 2d array maybe not full lenght
    virtualList.push([...range(i, array.length - 1)]);

    return virtualList;
  }
}

Import PipesModule to your component module, And use that pipe in your virtual scroll items like this:

<ion-virtual-scroll approxItemHeight="62.4px" [itemHeight]="itemHeightFn"
  [items]="dataList | virtualListIndex: exteraCol : nextPipe">

Now our virtual list items has the value of datalist items refrence and we can use it to get data from dataList

<div *virtualItem="let item;let i = index">
    <ion-row class="ion-nowrap>
        <ion-col *ngFor="let j of item;">
            <h3>i = {{dataList[j].id}} </h3>
        </ion-col>
    </ion-row>
</div>

Complete File's should be like this:

tab3.ts File

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll, IonVirtualScroll } from '@ionic/angular';
import * as faker from 'faker';
import { HostListener } from '@angular/core';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  dataList = [];
  vColMinWidth = 360; // virtual list columns min width as pixel
  exteraCol = 0;  // how many columns should be add to virtual list
  nextPipe = 0;
  screenWidth: number;

  constructor() {
    this.getScreenSize();
    this.getEmployees();
  }

  @HostListener('window:resize', ['$event'])
  getScreenSize(event?) {
    this.screenWidth = window.innerWidth;
    this.exteraCol = Math.trunc(this.screenWidth / this.vColMinWidth) -1;
    this.exteraCol = this.exteraCol < 0 ? 0 : this.exteraCol;
    this.exteraCol = this.exteraCol > 3 ? 3 : this.exteraCol; // if we want to have max virtual column count
  }

  getEmployees() {
    for (let i = 0; i < 250; i++) {
      this.dataList.push({
        id: this.dataList.length,
        image: faker.image.image(),
        name: faker.name.firstName(),
        address: faker.address.streetAddress(),
        intro: faker.lorem.words()
      });
    }
    this.nextPipe = this.dataList.length;
  }

  itemHeightFn(item, index) { // better performance if setting item height
    return 62.4;
  }

  loadData(event: any) {
    setTimeout(() => {

      // load more data
      this.getEmployees();
      this.virtualScroll.checkEnd();  // trigger end of virtual list
      event.target.complete();

      if (this.dataList.length === 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }
}

Tab3PageModule:

import { PipesModule } from '../pipes/pipes.module';

@NgModule({
  imports: [
    PipesModule,
...

tab3.html file

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-virtual-scroll approxItemHeight="62.4px" [itemHeight]="itemHeightFn"
    [items]="dataList | virtualListIndex: exteraCol : nextPipe">
    <div *virtualItem="let item;let i = index">
      <ion-row class="ion-nowrap>
        <ion-col *ngFor="let j of item;">
          <h3>i = {{dataList[j].id}} </h3>
        </ion-col>
      </ion-row>
    </div>
  </ion-virtual-scroll>

  <ion-infinite-scroll threshold="150px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

VirtualListIndexPipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'virtualListIndex'
})
export class VirtualListIndexPipe implements PipeTransform {

  transform(array: Array<any>, exteraCol: number, nextPipe: number): number[][] {
    const range = (s: number, e: number) => e > s ? [s, ...range(s + 1, e)] : [s];
    const virtualList = [] as number[][];

    let i = 0;
    for (i; i < (array.length - exteraCol); i += exteraCol + 1){
      virtualList.push([...range(i, i + exteraCol)]);
    }
    // last 2d array maybe not full lenght
    virtualList.push([...range(i, array.length - 1)]);

    return virtualList;
  }
}

try to resize screen from stackblitz

It was useful for my project, I hope you liked it 😏

Ionic video call by peerjs

timsar2 — Tue, 11 Feb 2020 17:06:36 +0000

Hello,
Before starting, this is ionic 5 angular 9 simple example of video call.
At the end you can connect two device in same network if the app is running on both of them.
if you want to wake up the app first you have to use something like push notification, we don't implement it now.

let do it fast :D

ionic must be installed.

from your console run

ionic start ionic-peer blank

then inside of your project folder, get peerjs:

npm install peerjs --save

add esModuleInterop to your tsconfig.json as below:

"compilerOptions": {
    ....
    "esModuleInterop": true,
    ....
}

create peer service:

ionic generate service providers/webrtc

edit WebrtcService, it'll initiate peer-to-peer connection and make call.

import Peer from 'peerjs';

export class WebrtcService {
  peer: Peer;
  myStream: MediaStream;
  myEl: HTMLMediaElement;
  partnerEl: HTMLMediaElement;

  stun = 'stun.l.google.com:19302';
  mediaConnection: Peer.MediaConnection;
  options: Peer.PeerJSOption;
  stunServer: RTCIceServer = {
    urls: 'stun:' + this.stun,
  };

  constructor() {

    this.options = {  // not used, by default it'll use peerjs server
      key: 'cd1ft79ro8g833di',
      debug: 3
    };
  }

  getMedia() {
    navigator.getUserMedia({ audio: true, video: true }, (stream) => {
      this.handleSuccess(stream);
    }, (error) => {
      this.handleError(error);
    });
  }

  async init(userId: string, myEl: HTMLMediaElement, partnerEl: HTMLMediaElement) {
    this.myEl = myEl;
    this.partnerEl = partnerEl;
    try {
      this.getMedia();
    } catch (e) {
      this.handleError(e);
    }
    await this.createPeer(userId);
  }

  async createPeer(userId: string) {
    this.peer = new Peer(userId);
    this.peer.on('open', () => {
      this.wait();
    });
  }

  call(partnerId: string) {
    const call = this.peer.call(partnerId, this.myStream);
    call.on('stream', (stream) => {
      this.partnerEl.srcObject = stream;
    });
  }

  wait() {
    this.peer.on('call', (call) => {
      call.answer(this.myStream);
      call.on('stream', (stream) => {
        this.partnerEl.srcObject = stream;
      });
    });
  }

  handleSuccess(stream: MediaStream) {
    this.myStream = stream;
    this.myEl.srcObject = stream;
  }

  handleError(error: any) {
    if (error.name === 'ConstraintNotSatisfiedError') {
      const v = constraints.video;
     // this.errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
      this.errorMsg(`The resolution px is not supported by your device.`);
    } else if (error.name === 'PermissionDeniedError') {
      this.errorMsg('Permissions have not been granted to use your camera and ' +
        'microphone, you need to allow the page access to your devices in ' +
        'order for the demo to work.');
    }
    this.errorMsg(`getUserMedia error: ${error.name}`, error);
  }

  errorMsg(msg: string, error?: any) {
    const errorElement = document.querySelector('#errorMsg');
    errorElement.innerHTML += `<p>${msg}</p>`;
    if (typeof error !== 'undefined') {
      console.error(error);
    }
  }
}

init method will create a peer connection with yourId and then register wait method to listen to any call .
if any call receive inside wait method, it'll answer the call automatically,
you can handel it by yourself
(new peer() without option will connect to default server, you can use other server or run your own peer server)
it'll also start to stream video/audio as you define in option and push it to object of html element.(we have to create a html element to show video in home.html page)

call method will ask peer server to connect you to your partner as call type.
both call method and wait method duty is streaming partner video/audio and show it inside of partner media frame(we will create it inside home page)

Edit home.html

<ion-content>
  <div id="errorMsg"></div>

  <video id="partner-video" (click)="swapVideo('my-video')" autoplay playsinline
    [ngClass]="{'top-video': topVideoFrame === 'partner-video', 'main-video': topVideoFrame != 'partner-video'}">
  </video>
  <video id="my-video" (click)="swapVideo('partner-video')" autoplay playsinline
    [ngClass]="{'top-video': topVideoFrame === 'my-video', 'main-video': topVideoFrame != 'my-video'}" >
  </video>


  <ion-row nowrap>
    <ion-button (click)="init()">Login As: </ion-button>
    <ion-item>
      <ion-input type="text" [(ngModel)]="userId" placeholder="enter your nick name"></ion-input>
    </ion-item>
  </ion-row>

  <ion-row nowrap>
    <ion-button (click)="call()">Call To: </ion-button>
    <ion-item>
      <ion-input type="text" [(ngModel)]="partnerId" placeholder="your partner nick name"></ion-input>
    </ion-item>
  </ion-row>  
</ion-content>

video tag will show you stream media of you and your partner.
you have to login with nick name, because of using default server, you may see other people with easy nick name :D

Edit home.ts like this

import { WebrtcService } from '../providers/webrtc.service';

export class HomePage {
  topVideoFrame = 'partner-video';
  userId: string;
  partnerId: string;
  myEl: HTMLMediaElement;
  partnerEl: HTMLMediaElement;

  constructor(
    public webRTC: WebrtcService,
    public elRef: ElementRef
  ) {}

  init() {
    this.myEl = this.elRef.nativeElement.querySelector('#my-video');
    this.partnerEl = this.elRef.nativeElement.querySelector('#partner-video');
    this.webRTC.init(this.userId, this.myEl, this.partnerEl);
  }

  call() {
    this.webRTC.call(this.partnerId);
    this.swapVideo('my-video');
  }

  swapVideo(topVideo: string) {
    this.topVideoFrame = topVideo;
  }
}

login method will assign video frame to html element and pass them to webrtcservice, so the service can push stream to them.

call method will pass partnerId to webrtc service for connection to your partner.

Edit home.scss

.top-video{
    position: absolute;
    top: 100px;
    right: 100px;
    max-width: 100px;
    z-index: 2;
}

.main-video{
    width: 100%;
    max-height: 70%;
}

after you and your partner get connected, you can swap video with swapVideo method and [ngClass].

webrtc service will ask for camera/microphone permission.
because of that, when we run application outside of localhost, browser will block permission, so we have to run it with --ssl parameter.
first join your pc/laptop with your second device (pc/laptop or mobile) to the same network
then run ionic serve with your ip address, for example:

ionic serve --address 192.168.43.105 --ssl

in your second device visit that address with https prefix:

https://192.168.43.105:8100

source on github

DEV Community: timsar2

Hide node_module from side menu of vscode

Create DatePicker By TailWindCss + Angular

Just Show The code :D

Custom Ionic Animation On Page Transition

let do it fast :D

Support Dynamic Multiple Columns And Infinity Scroll in Ionic Angular

Let’s do it!

tab3.ts File

Tab3PageModule:

tab3.html file

VirtualListIndexPipe:

try to resize screen from stackblitz

Ionic video call by peerjs

let do it fast :D

Edit home.html

Edit home.ts like this

Edit home.scss

That's it, i hope it's useful.