Commit 3a079e24 authored by boncho vylkov's avatar boncho vylkov

unitial commit of .NET Core with PrimeNg components lib

parent 29c03843
......@@ -10,7 +10,12 @@ import { APP_SERVICES, AuthInterceptorService, AuthErrorsInterceptorService } fr
import { APP_COMPONENTS, AppComponent } from './components/index';
import { SharedModule } from './components/shared/shared.module';
import { AppSharedModule } from './components/shared/shared.module';
import { ButtonModule } from 'primeng/button';
import { TabViewModule } from 'primeng/tabview';
import { MegaMenuModule } from 'primeng/megamenu';
import { SliderModule } from 'primeng/slider';
@NgModule({
imports: [
......@@ -18,9 +23,15 @@ import { SharedModule } from './components/shared/shared.module';
FormsModule,
HttpClientModule,
SharedModule,
AppSharedModule,
AppRoutingModule,
ButtonModule,
TabViewModule,
MegaMenuModule,
SliderModule
AppRoutingModule
],
declarations: [APP_COMPONENTS],
......
<div class="row">
<div class="col-md-6">
<h2>ASP.NET Core</h2>
<ul>
<li>
<a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api" target="_blank">
Getting Started with ASP.NET Core
</a>
</li>
</ul>
</div>
<div class="col-md-6">
<h2>Angular</h2>
<ul>
<li>
<a href="https://angular.io/guide/quickstart" target="_blank">
Getting Started with Angular
</a>
</li>
</ul>
<br />
<div class="row">
<div class="col-md-12">
<p class="well"><strong>Register and login to view and play with the sample TODO app!</strong></p>
</div>
</div>
<br />
<h3>For full documentataion: <a href="https://www.primefaces.org/primeng/#/">https://www.primefaces.org/primeng/#/</a></h3>
<div class="row">
<div class="col-md-12">
<p class="well"><strong>Register and login to view and play with the sample TODO app!</strong></p>
<p-megaMenu [model]="items">
<input type="text" pInputText placeholder="Search">
<button pButton label="Logout" icon="fa-sign-out"></button>
</p-megaMenu>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6">
<h3>Button Component</h3>
<p-button (onClick)="count()" label="Click"></p-button>
Number of clicks: {{clicks}}
<br />
<h3>Slider Component</h3>
<p-slider [(ngModel)]="clicks"></p-slider>
</div>
<div class="col-md-6" >
<h3>Tab biew</h3>
<p-tabView >
<p-tabPanel header="Header 1">
Content 1
</p-tabPanel>
<p-tabPanel header="Header 2" [selected]="true">
Content 2
</p-tabPanel>
<p-tabPanel header="Header 3">
Content 3
</p-tabPanel>
</p-tabView>
</div>
</div>
<br />
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/components/common/menuitem';
@Component({
moduleId: module.id,
......@@ -6,4 +7,79 @@
templateUrl: 'home.component.html'
})
export class HomeComponent { }
export class HomeComponent {
clicks: number = 0;
count() {
this.clicks++;
}
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'TV', icon: 'fa-check',
items: [
[
{
label: 'TV 1',
items: [{ label: 'TV 1.1' }, { label: 'TV 1.2' }]
},
{
label: 'TV 2',
items: [{ label: 'TV 2.1' }, { label: 'TV 2.2' }]
}
],
[
{
label: 'TV 3',
items: [{ label: 'TV 3.1' }, { label: 'TV 3.2' }]
},
{
label: 'TV 4',
items: [{ label: 'TV 4.1' }, { label: 'TV 4.2' }]
}
]
]
},
{
label: 'Sports', icon: 'fa-soccer-ball-o',
items: [
[
{
label: 'Sports 1',
items: [{ label: 'Sports 1.1' }, { label: 'Sports 1.2' }]
},
{
label: 'Sports 2',
items: [{ label: 'Sports 2.1' }, { label: 'Sports 2.2' }]
},
],
[
{
label: 'Sports 3',
items: [{ label: 'Sports 3.1' }, { label: 'Sports 3.2' }]
},
{
label: 'Sports 4',
items: [{ label: 'Sports 4.1' }, { label: 'Sports 4.2' }]
}
],
[
{
label: 'Sports 5',
items: [{ label: 'Sports 5.1' }, { label: 'Sports 5.2' }]
},
{
label: 'Sports 6',
items: [{ label: 'Sports 6.1' }, { label: 'Sports 6.2' }]
}
]
]
}
];
}
}
......@@ -31,4 +31,4 @@ import { APP_PIPES } from '../../pipes/index';
]
})
export class SharedModule { }
export class AppSharedModule { }
......@@ -8,7 +8,9 @@
<title>ASP.NET Core with Angular Template</title>
<link type="text/css" rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="lib/primeng/css/primeng.min.css" rel="stylesheet" />
<link href="lib/primeng/css/theme.css" rel="stylesheet" />
<!-- build:css css/app.min.css -->
<link href="css/site.css" rel="stylesheet" />
<!-- endbuild -->
......
......@@ -8,14 +8,46 @@
'app': 'app',
'rxjs': 'lib/rxjs',
'tslib': 'lib/tslib/tslib.js',
'zone.js': 'lib/zone.js/dist'
'zone.js': 'lib/zone.js/dist',
'primeng':'lib/primeng/js/primeng.js', // add the main wrapper
'primeng/button': 'lib/primeng',
'primeng/tabview': 'lib/primeng/js/components/tabview',
'primeng/megamenu': 'lib/primeng/js/components/megamenu',
'primeng/slider': 'lib/primeng/js/components/slider' // shere should be any equal values on the right or left hand side
//'primeng/card': 'lib/primeng'
//'primeng/shared': 'lib/primeng'
};
// how to load when no filename and/or no extension
var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'zone.js': { main: 'zone', defaultExtension: 'js' }
'zone.js': { main: 'zone', defaultExtension: 'js' },
//'primeng': { main: 'js/primeng.js', defaultExtension: 'js' },
'primeng/button': { main: 'js/components/button/button.js', defaultExtension: 'js' },
'primeng/megamenu': { main: 'megamenu.js', defaultExtension: 'js' },
'primeng/slider': { main: 'slider.js', defaultExtension: 'js' },
'primeng/tabview': { main: 'tabview.js', defaultExtension: 'js' }
//'primeng/card': { main: 'js/components/card/card.js', defaultExtension: 'js' }
//'primeng':
//{
// main: 'js/primeng.js',
// defaultExtension: 'js',
// //map: {
// // 'primeng/button':'primeng/button/hui.js'
// //}
// //meta: {
// // // sets meta for modules within the package
// // 'components/*': {
// // 'format': 'global'
// // }
// //}
//}
};
[
......
......@@ -97,9 +97,21 @@ var jsSys = [
'systemjs/dist/system.src.js'
];
var primeNgModulePath = 'primeng/';
var primeNgComponentsPath = primeNgModulePath + 'components/';
var primeNgComponentsCommonPath = primeNgComponentsPath + 'common/';
var primeNgResourcesPath = primeNgModulePath + 'resources/';
// primeNgComponentsCommonPath + "api.js"
var primeNgLibs = [
primeNgComponentsPath + "/**/*.js",
];
var jsLibs = [
'bootstrap/dist/js/bootstrap.js',
'jquery/dist/jquery.min.js'
'jquery/dist/jquery.min.js',
primeNgModulePath + "primeng.js"
];
/*
......@@ -127,22 +139,43 @@ gulp.task('setup-libs-app', function (done) {
});
gulp.task('setup-libs-js', function (done) {
var js = jsLibs.map(function (lib) {
var js = setupNodeModulesPath(jsLibs);
return gulpTaskMoveJsFiles(js);
});
gulp.task('setup-libs-primeNg', function (done) {
var js = setupNodeModulesPath(primeNgLibs);
return gulpTaskMoveJsFiles(js, true);
});
var setupNodeModulesPath = function (jsFiles) {
var js = jsFiles.map(function (lib) {
return 'node_modules/**/' + lib;
});
return js;
};
var gulpTaskMoveJsFiles = function (jsFiles, keepInnerStructure) {
return gulp
.src(js)
.src(jsFiles)
.pipe(rename(function (path) {
var libName = path.dirname.split('\\')[0];
path.dirname = libName + '\\js';
var pathParts = path.dirname.split('\\');
var libName = pathParts[0];
// console.log(path.dirname.substr(libName.length));
path.dirname = libName + '\\js' + (keepInnerStructure ? path.dirname.substr(libName.length) : "");
}))
.pipe(gulp.dest(paths.lib.js));
});
};
gulp.task('setup-libs-css', function (done) {
var css = [
'node_modules/**/bootstrap/dist/css/bootstrap.css'
'node_modules/**/bootstrap/dist/css/bootstrap.css',
'node_modules/**/font-awesome/css/font-awesome.min.css',
'node_modules/**/' + primeNgResourcesPath + "primeng.min.css",
'node_modules/**/' + primeNgResourcesPath + "themes/omega/theme.css",
];
return gulp
......@@ -160,7 +193,12 @@ gulp.task('setup-libs-fonts', function (done) {
'node_modules/**/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',
'node_modules/**/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',
'node_modules/**/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',
'node_modules/**/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2'
'node_modules/**/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2',
'node_modules/**/font-awesome/fonts/fontawesome-webfont.eot',
'node_modules/**/font-awesome/fonts/fontawesome-webfont.svg',
'node_modules/**/font-awesome/fonts/fontawesome-webfont.ttf',
'node_modules/**/font-awesome/fonts/fontawesome-webfont.woff',
'node_modules/**/font-awesome/fonts/fontawesome-webfont.woff2'
];
return gulp
......@@ -172,7 +210,41 @@ gulp.task('setup-libs-fonts', function (done) {
.pipe(gulp.dest(paths.lib.fonts));
});
gulp.task('setup-libs', ['setup-libs-app', 'setup-libs-js', 'setup-libs-css', 'setup-libs-fonts']);
gulp.task('setup-libs-fonts-theme', function (done) {
var fonts = [
'node_modules/**/' + primeNgResourcesPath + "themes/omega/fonts/roboto-v15-latin-regular.eot",
'node_modules/**/' + primeNgResourcesPath + "themes/omega/fonts/roboto-v15-latin-regular.svg",
'node_modules/**/' + primeNgResourcesPath + "themes/omega/fonts/roboto-v15-latin-regular.ttf",
'node_modules/**/' + primeNgResourcesPath + "themes/omega/fonts/roboto-v15-latin-regular.woff",
'node_modules/**/' + primeNgResourcesPath + "themes/omega/fonts/roboto-v15-latin-regular.woff2",
];
return gulp
.src(fonts)
.pipe(rename(function (path) {
var libName = path.dirname.split('\\')[0];
path.dirname = libName + '\\css\\fonts';
}))
.pipe(gulp.dest(paths.lib.fonts));
});
gulp.task('setup-libs-images-theme', function (done) {
var images = [
'node_modules/**/' + primeNgResourcesPath + "images/*",
'node_modules/**/' + primeNgResourcesPath + "themes/omega/images/*"
];
return gulp
.src(images)
.pipe(rename(function (path) {
var libName = path.dirname.split('\\')[0];
path.dirname = libName + '\\css\\images';
}))
.pipe(gulp.dest(paths.lib.fonts));
});
gulp.task('setup-libs', ['setup-libs-app', 'setup-libs-js', 'setup-libs-css', 'setup-libs-fonts', 'setup-libs-primeNg', 'setup-libs-images-theme', 'setup-libs-fonts-theme']);
/*
Artefacts tasks
......
......@@ -14,11 +14,13 @@
"bootstrap": "3.3.7",
"core-js": "2.5.3",
"jquery": "3.2.1",
"primeng": "^5.2.4",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.5",
"systemjs": "0.20.19",
"tslib": "1.8.1",
"zone.js": "0.8.18"
"zone.js": "0.8.18",
"font-awesome": "^4.7.0"
},
"devDependencies": {
"@types/core-js": "0.9.43",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment