Month: June 2019

Connect to Socket.IO Server

Server

var express = require('express');
var app = express();
var logger = require('morgan');
var server = require('http').Server(app);
var io = require('socket.io')(server);
app.use(express.static('public'));

app.use(logger('dev'));
server.listen(14000);

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', function (socket) {
    console.log("Connected : " + socket.client.id);
});

Client

$(document).ready(function () {
    var socket = io.connect('http://localhost:14000');
});

References
https://socket.io/docs/#Using-with-Express

Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

<div class="row">
  <div
    class="col p-3 mb-2 bg-secondary text-white mx-3 d-flex
    justify-content-center align-items-center rounded shadow-sm position-relative">
    <div class="flex-grow-1 text-center">{{parentName}}</div>
    <div class="spinner-border text-white position-absolute"
         style="right: 5px;"
         role="status" [ngClass]="{invisible:spinnerInvisibility}">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

Reference
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
https://www.quora.com/What-does-it-mean-when-the-parent-has-position-relative-and-the-child-has-position-absolute-in-CSS
https://css-tricks.com/forums/topic/add-and-overlay-div-in-nested-flex-box-container/

Filter an array of Observable Object using RxJS

map((reports : IReport[]) => reports.filter(p => p.reportName === name))

findItemsByParentId(id: number): Promise<Item[]> {
  return new Promise<Item[]>((resolve, reject) => {
    this.localStorage.getItem('items')
      .pipe(map((items: Item[]) => items.filter((item: Item) => item.parentId === id)))
      .subscribe((value: Item[]) => {
        resolve(value);
      });
  });
}

References
https://www.learnrxjs.io/operators/transformation/map.html
https://rxjs.dev/api/operators/map
https://stackoverflow.com/questions/52263374/angular-rxjs-observable-filter-on-array-of-objects

Filter an Observable using RxJS

filter objects based on property

// RxJS v6+
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

//emit ({name: 'Joe', age: 31}, {name: 'Bob', age:25})
const source = from([{ name: 'Joe', age: 31 }, { name: 'Bob', age: 25 }]);
//filter out people with age under 30
const example = source.pipe(filter(person => person.age >= 30));
//output: "Over 30: Joe"
const subscribe = example.subscribe(val => console.log(`Over 30: ${val.name}`));

References
https://www.learnrxjs.io/operators/filtering/filter.html
https://rxjs.dev/api/operators/filter