Try to search @types/package_name first

Install Semantic-UI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
npm install --global gulp-cli
npm install -g less@2.7.3 --save
npm install semantic-ui --save
npm install jquery --save
cd semantic
gulp build
in angular.json
"styles": [
        "./semantic/dist/semantic.min.css",
        "sass/styles.scss"
   ],
   "scripts": [
        "./node_modules/jquery/dist/jquery.min.js", "./semantic/dist/semantic.min.js"
   ],

Use Jquery in Angular

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
take semantic calendar as an example
npm install semantic-ui-calendar --save
in your .ts file, add semantic-ui-calendar.css and .js
now your angular.json should be:
"styles": [
              "src/styles.css","./semantic/dist/semantic.css","./node_modules/semantic-ui-calendar/dist/calendar.css"
            ],
"scripts": ["./node_modules/jquery/dist/jquery.min.js","./semantic/dist/semantic.js","./node_modules/semantic-ui-calendar/dist/calendar.js"]
in your .html file, create an calendar
<div class="ui container">
  <div class="ui calendar" id="calendar">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date">
    </div>
  </div>
</div>
in your .ts file, import jquery
declare var $: any;
then in ngOnInit()
ngOnInit() {
    $('#calendar').calendar({type: 'datetime'});
  }

Use moments.js in Angular

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
npm install moment --save 
npm install --save-dev @types/moment-duration-format
npm install --save-dev @types/moment-timezone
declare var $: any;
import * as moment from 'moment-timezone';
import * as moment_duration from 'moment'; // the moment.js in moment-timezone has conflict with monent.js. So I make an alias
import 'moment-duration-format';
import 'moment-timezone';
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
    console.log(moment('2014-06-01T12:00:00Z').tz('America/Los_Angeles').format('YYYY-MM-DD hh:mm:ss a z'));
    console.log(moment(1530466846000).get('year'));
    console.log(moment(1530466846000).get('day'));
    console.log(moment(1403454068850).tz('America/Toronto').format('YYYY-MM-DD hh:mm:ss a z'));
    console.log(moment(1530466846000).tz('America/Los_Angeles').format('YYYY-MM-DD hh:mm:ss a z'));
    console.log(moment_duration.duration(123, 'minutes').format());
    console.log(moment.unix(1318781876.721).format('YYYY-MM-DD hh:mm:ss a'));
    console.log(moment.unix(1318781876).utc().format('YYYY-MM-DD hh:mm:ss a'));
    console.log(moment().format());
    console.log(moment().utc().format());
    console.log(moment().dayOfYear());
    console.log(moment().date());
    console.log(moment().week());
    const a = moment().subtract(1, 'day');
    const b = moment().add(1, 'day');
    console.log(moment.max(a, b).format());
    console.log(moment().add(7, 'days').format());
    console.log(moment().local().hours());
    console.log(moment().startOf('year').format());
    console.log(moment('2016-08-16T00:00:00Z').tz('Asia/Shanghai').format('YYYY-MM-DD hh:mm:ss a z'));
    console.log(moment('2016-08-16T00:00:00Z').fromNow().valueOf());
    console.log(-moment('2016-08-16T00:00:00Z').unix() + moment().unix());
    console.log(moment_duration.duration(-moment('2016-08-16T00:00:00Z').unix() + moment().unix(), 'seconds').format('Y [years], M [months], D [days], H [hrs], m [min], s[s]'));

Use Semantic-UI in Angular

Semantic-UI 非常好用，前端开发利器. 做monitoring 的时候遇到了几个问题

  1. 什么时候用路由，什么时候用modal?

    • 如果reload 当前page非常耗时且不会更新，那么就用modal，否则就需要路由

  2. table 里面每行都有一个button，但是这个button是ngfor生成的，无法区分，点击的时候无法确定是哪个button。

    • 把button和这一行warp在一起
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.html
<div class="some-wrapping-div">
  <div class="ui primary button" (click)="getAttributesDetail()">Attributes</div>
</div>
<div #modal class="ui modal"> <!--#modal很重要，是parent元素拿到child元素的依据-->
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="/images/avatar/large/chris.jpg">
    </div>
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>
.ts
@ViewChild('modal') popup_modal: ElementRef;
@Input attributes: Attribute[];
getAttributesDetail(){
	${this.popup_modal.nativeElement}.modal('show');
}

Filter

按照attributeId, attributeName, tableName filter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.ts
import {Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
	transform(value: any, args?: any): any {
		if (!value) {
			return [];
		}
		
		// args[0] is searchText, args[1] is searchChoice
		if (!args[0] || args[1] === ' '){
			return value;
		}
		
		if(args[1] === '1'){
			return value.filter(it => {
				return it.table_name.toString().toLowerCase().includes(args[0].toString().toLowerCase());
			});
		}else if(args[1]==='0'){
			return value.filter( it=> {
				for(const attribute of it.attributes){
					if(attribute.attributeName.toString().toLowerCase().includes(args[0].toString().toLowerCase())){
					return true;
					}
				}
				return false;
			});
		}else if(args[1]==='2'){
			return value.fiter( it => {
				for (const attribute of it.attributes){
					if(attribute.attributeId.toString().toLowerCase().includes(args[0].toString().toLowerCase())){
					return true;
					}
				}
				return false;
			});
		}
	}
}
.html
<section class="table-list">
<app-table-detail *ngFor="let table of tables | filter: [searchText, filterChoice]" [item]="table"></app-table-detail>
</section>