Full Stack Angular, React, Spring Boot Ganpathi: May 2018

Tuesday 22 May 2018

CSS3 - Animation best E.g - tranisition and translate

<!DOCTYPE html>
<html lang="en">
<head>
<title>Original Hover Effects with CSS3</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Original Hover Effects with CSS3" />

<link rel="stylesheet" type="text/css" href="css/style_common1.css" />
<link rel="stylesheet" type="text/css" href="css/style55.css" />
<style>
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}

.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-fifth img {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
-webkit-transform: translateY(-300px);
-moz-transform: translateY(-300px);
-o-transform: translateY(-300px);
-ms-transform: translateY(-300px);
transform: translateY(-300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-fifth h2 {
background: rgba(255, 255, 255, 0.5);
color: #000;
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #333;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.view-fifth:hover img {
-webkit-transform: translateY(300px);
-moz-transform: translateY(300px);
-o-transform: translateY(300px);
-ms-transform: translateY(300px);
transform: translateY(300px);
}
.view-fifth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

</style>

</head>
<body>
<div class="container">

<div class="main">

<div class="view view-fifth">
<img src="images/1.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="images/5.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="images/2.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="images/7.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
</div>
</div>

</body>
</html>

ref: https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/comment-page-7/#comment-475933

Monday 14 May 2018

Angular 2 provides good support for uploading file

Angular 2 provides good support for uploading file. Any third party library is not required.

<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

fileChange(event) {
let fileList: FileList = event.target.files;
if(fileList.length > 0) {
let file: File = fileList[0];
let formData:FormData = new FormData();
formData.append('uploadFile', file, file.name);
let headers = new Headers();
/** In Angular 5, including the header Content-Type can invalidate your request */
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options = new RequestOptions({ headers: headers });
this.http.post(`${this.apiEndPoint}`, formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
)
}
}
using @angular/core": "~2.0.0" and @angular/http: "~2.0.0"

Ref:
https://www.blogger.com/blogger.g?blogID=4795707642151153385#editor/target=post;postID=5393771942504813896

Angular - modal popup - Bg cover centered ver horizantally

app.module.ts
------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UiComponentsModule } from './ui-components/ui-components.module';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UiComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts
-------------
import { Component, ElementRef, ViewChild } from '@angular/core';
....
export class AppComponent {
...
....
showStatusMessage = false;
openModal(){
this.showStatusMessage = true;
}
popupTitle ="success !";
statusMessageText = "open popup working"
showStatusMessageDialogclose(){
this.showStatusMessage = false;
}

app.template.html
----------------

<div><a (click)="openModal()">Open Modal</a></div>

<app-modal [close]="!showStatusMessage" [title]="popupTitle" [msg]="statusMessageText" (closepopupclicked)="showStatusMessageDialogclose()"></app-modal>

ui-components/ui-components.module.ts
-----------------------------------
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalComponent } from './modal/modal.component';

const uiComponents =[
ModalComponent
]

@NgModule({
imports: [
CommonModule
],
declarations: [
...uiComponents
],
exports:[
...uiComponents
]
})
export class UiComponentsModule { }

ui-components/modal
-----------------
modal.component.ts
---------------
import { Component, Input, Output, OnChanges, OnInit, EventEmitter, ViewEncapsulation, HostListener } from '@angular/core';

@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent {

@Input() title:any = 'modal';
@Input() msg:any = 'modal';
@Input() close = modal;
@Output() closepopupclicked = new EventEmitter();
constructor(){
}
closePopup(){
//this.close = true;
this.closepopupclicked.emit(true);
}

keyboardEvent: any;
@HostListener('window:keydown', ['$event'])
keyboardInput(event: any) {
this.keyboardEvent = event;
if (event.keyCode == 27){
console.log("Esc Key press to clsoe current popup");
this. closePopup();
}
}

}

modal.component.html
-----------------
<div [hidden]="close" class="popup-bg">
<div class="modal-popup-frame-container">
<div class="modal-popup-title">{{title}}</div>
<div class="modal-popup-message" [innerHTML]="msg" ></div>
<div class="button modal-popup-button" (click)="closePopup()">Close</div>
</div>
</div>

modal.component.css
----------------------
.popup-bg {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 14;
}

.modal-popup-frame-container{
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 50%;
z-index:15;
background: white;
min-height: 200px;
border-top: 50px solid green;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
}

.modal-popup-title{
position: relative;
margin-top: -30px;
margin-left: 20px;
font-size: 20px;
color: white;
float:left;
}
.modal-popup-message{
top: 20px;
position: relative;
margin-left: 20px;
font-size: 14px;
line-height: 20px;
min-height: 70px;
max-height: 70px;
width: 100%;
overflow-y: auto;
float: left;
padding-right: 33px;
}
.modal-popup-button{
position: relative;
float: right;
top: 33px;
right: 18px;
padding: 11px 22px;
cursor: pointer;

}

Thursday 10 May 2018

Ng4-Export JSON to CSV

Ng5- Download JSON to CSV
template.html
-------------
<a id="Download" title="Download " (click)="downloadCSV()">
<img src="assets/svg/icons/Download.svg" />
</a>

component.ts
------------
import {ExportCSV} from '../../../exportCSV';

construct(private _exportService:ExportCSV){}

Data = Response Array from Web API service data

downloadCSV() {
this.downloadData = this.Data.map(item => {
let val = new Date(item.eeeDate.split(' ')[0]);
var day = val.getDate();
var monthIndex = val.getMonth();
var year = val.getFullYear();
let months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
let mm = months[monthIndex];
item.eeeDate =day +" " + mm + " " + year;
return item;
});
let jsonData=this.allData;
let level=this.url[3];
let id=this.url[4];
let header=['header1 Name','h2name','h3 Number','h4 Id','h5','h6 Version','h7 Date'];
let keys=['h1k1','h2k2','h3k3','h4k4','h5k5','h6k6','h7k7'];
let filename= 'CDE';
this._exportService.exportCSV(keys,header,jsonData,filename,level,id);

shared->exportCSVService:
------------
import { Injectable } from '@angular/core';

@Injectable()
export class ExportCSV {
constructor() {}
exportCSV(keys,header,jsonData,filename,level,id){
let filteredData = this.getFilterJSON(keys,jsonData);
let ReportTitle = filename+ " " +level+" "+id;
let ShowLabel = true;
var arrData = typeof filteredData != 'object' ? JSON.parse(filteredData) : filteredData;
var CSV = '';
if (ShowLabel) {
var row = "";
for (let index=0;index<header.length;index++) {
row += header[index] + ',';
}
row = row.slice(0, -1);
CSV += row + '\r\n';
}
for (var i = 0; i < arrData.length; i++) {
var row = "";
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
}

if (CSV == '') {
console.log("Invalid data");
return;
}
var fileName = ReportTitle.replace(/ /g, "_");
var uri = 'data:text/csv;charset=utf-8,' + encodeURI(CSV);
var link = document.createElement("a");
link.href = uri;
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
getFilterJSON(keys,jsonObj){
let k=[];
for(let i=0;i<jsonObj.length;i++){
let item = {};
for(let m=0;m<keys.length;m++){
item[keys[m]]=jsonObj[i][keys[m]];
}
k.push(item);
}
return k;
}