1643373989
bootstrap datepicker start date end date example
Bootstrap Datepicker Start and End date Validation
You can easily enable date selection to the form element using Bootstrap datepicker if you are already using Bootstrap on your page.
You need to add external Bootstrap datepicker library.
This allows the users to select any date from the datepicker and they are not restricted.
To restrict the date selection you can use startDate and endDate option while initializing it on the HTML element.
1. Download and Include
- Download jQuery and Bootstrap.
- Also, need to download Bootstrap datepicker which you can download from here.
- Include jQuery, Bootstrap, and Bootstrap datepicker script and CSS files.
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<!-- Datepicker -->
<link href='bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' rel='stylesheet' type='text/css'>
<script src='bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' type='text/javascript'></script>2. Fixed Start and End date
Pass the date in the valid format in startDate and endDate options while initializing.
In the example, I am setting date range between '2019-12-5' and '2020-7-12'.
Completed Code
<div class='container' style='margin-top: 100px;'>
<input type='text' class="form-control" id='datepicker' placeholder='Select Date' style='width: 300px;' >
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker({
format: "yy-mm-dd",
startDate: new Date('2019-12-5'),
endDate: new Date('2020-7-12')
});
});
</script>3. With a set of String values
To make the datepicker range change according to the current date then you can use a defined set of string values in the options.
There are the following symbols are available –
y,m,d,+,-
Using this you can specify startDate and endDate values e.g. ‘+2m’,’-2m’,’+1y +10d’,’-10d’, etc
Completed Code
<div class='container' style='margin-top: 100px;'>
<input type='text' class="form-control" id='datepicker' placeholder='Select Date' style='width: 300px;' ><br><br>
<input type='text' class="form-control" id='datepicker2' placeholder='Select Date' style='width: 300px;' >
</div>
<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker({
format: "yy-mm-dd",
startDate: '-1y -1m',
endDate: '+2m +10d'
});
$('#datepicker2').datepicker({
format: "yy-mm-dd",
startDate: '-1m',
endDate: '+10d'
});
});
</script>4. Conclusion
Use startDate and endDate option to define the datepicker range where you can use fixed date values or use valid string (y,m,d,+,-) to define value.
If you found this tutorial helpful then don't forget to share.
https://www.pakainfo.com/bootstrap-datepicker-start-date-end-date-example/
What is GEEK
Buddha Community
1651383480
A Simple Wrapper Around Amplify AppSync Simulator
This serverless plugin is a wrapper for amplify-appsync-simulator made for testing AppSync APIs built with serverless-appsync-plugin.
Install
npm install serverless-appsync-simulator
# or
yarn add serverless-appsync-simulator
Usage
This plugin relies on your serverless yml file and on the serverless-offline plugin.
plugins:
- serverless-dynamodb-local # only if you need dynamodb resolvers and you don't have an external dynamodb
- serverless-appsync-simulator
- serverless-offline
Note: Order is important serverless-appsync-simulator must go before serverless-offline
To start the simulator, run the following command:
sls offline start
You should see in the logs something like:
...
Serverless: AppSync endpoint: http://localhost:20002/graphql
Serverless: GraphiQl: http://localhost:20002
...
Configuration
Put options under custom.appsync-simulator in your serverless.yml file
| option | default | description | | ------------------------ | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | apiKey | 0123456789 | When using API_KEY as authentication type, the key to authenticate to the endpoint. | | port | 20002 | AppSync operations port; if using multiple APIs, the value of this option will be used as a starting point, and each other API will have a port of lastPort + 10 (e.g. 20002, 20012, 20022, etc.) | | wsPort | 20003 | AppSync subscriptions port; if using multiple APIs, the value of this option will be used as a starting point, and each other API will have a port of lastPort + 10 (e.g. 20003, 20013, 20023, etc.) | | location | . (base directory) | Location of the lambda functions handlers. | | refMap | {} | A mapping of resource resolutions for the Ref function | | getAttMap | {} | A mapping of resource resolutions for the GetAtt function | | importValueMap | {} | A mapping of resource resolutions for the ImportValue function | | functions | {} | A mapping of external functions for providing invoke url for external fucntions | | dynamoDb.endpoint | http://localhost:8000 | Dynamodb endpoint. Specify it if you're not using serverless-dynamodb-local. Otherwise, port is taken from dynamodb-local conf | | dynamoDb.region | localhost | Dynamodb region. Specify it if you're connecting to a remote Dynamodb intance. | | dynamoDb.accessKeyId | DEFAULT_ACCESS_KEY | AWS Access Key ID to access DynamoDB | | dynamoDb.secretAccessKey | DEFAULT_SECRET | AWS Secret Key to access DynamoDB | | dynamoDb.sessionToken | DEFAULT_ACCESS_TOKEEN | AWS Session Token to access DynamoDB, only if you have temporary security credentials configured on AWS | | dynamoDb.* | | You can add every configuration accepted by DynamoDB SDK | | rds.dbName | | Name of the database | | rds.dbHost | | Database host | | rds.dbDialect | | Database dialect. Possible values (mysql | postgres) | | rds.dbUsername | | Database username | | rds.dbPassword | | Database password | | rds.dbPort | | Database port | | watch | - *.graphql
- *.vtl | Array of glob patterns to watch for hot-reloading. |
Example:
custom:
appsync-simulator:
location: '.webpack/service' # use webpack build directory
dynamoDb:
endpoint: 'http://my-custom-dynamo:8000'
Hot-reloading
By default, the simulator will hot-relad when changes to *.graphql or *.vtl files are detected. Changes to *.yml files are not supported (yet? - this is a Serverless Framework limitation). You will need to restart the simulator each time you change yml files.
Hot-reloading relies on watchman. Make sure it is installed on your system.
You can change the files being watched with the watch option, which is then passed to watchman as the match expression.
e.g.
custom:
appsync-simulator:
watch:
- ["match", "handlers/**/*.vtl", "wholename"] # => array is interpreted as the literal match expression
- "*.graphql" # => string like this is equivalent to `["match", "*.graphql"]`
Or you can opt-out by leaving an empty array or set the option to false
Note: Functions should not require hot-reloading, unless you are using a transpiler or a bundler (such as webpack, babel or typescript), un which case you should delegate hot-reloading to that instead.
Resource CloudFormation functions resolution
This plugin supports some resources resolution from the Ref, Fn::GetAtt and Fn::ImportValue functions in your yaml file. It also supports some other Cfn functions such as Fn::Join, Fb::Sub, etc.
Note: Under the hood, this features relies on the cfn-resolver-lib package. For more info on supported cfn functions, refer to the documentation
Basic usage
You can reference resources in your functions' environment variables (that will be accessible from your lambda functions) or datasource definitions. The plugin will automatically resolve them for you.
provider:
environment:
BUCKET_NAME:
Ref: MyBucket # resolves to `my-bucket-name`
resources:
Resources:
MyDbTable:
Type: AWS::DynamoDB::Table
Properties:
TableName: myTable
...
MyBucket:
Type: AWS::S3::Bucket
Properties:
BucketName: my-bucket-name
...
# in your appsync config
dataSources:
- type: AMAZON_DYNAMODB
name: dynamosource
config:
tableName:
Ref: MyDbTable # resolves to `myTable`
Override (or mock) values
Sometimes, some references cannot be resolved, as they come from an Output from Cloudformation; or you might want to use mocked values in your local environment.
In those cases, you can define (or override) those values using the refMap, getAttMap and importValueMap options.
refMaptakes a mapping of resource name to value pairsgetAttMaptakes a mapping of resource name to attribute/values pairsimportValueMaptakes a mapping of import name to values pairs
Example:
custom:
appsync-simulator:
refMap:
# Override `MyDbTable` resolution from the previous example.
MyDbTable: 'mock-myTable'
getAttMap:
# define ElasticSearchInstance DomainName
ElasticSearchInstance:
DomainEndpoint: 'localhost:9200'
importValueMap:
other-service-api-url: 'https://other.api.url.com/graphql'
# in your appsync config
dataSources:
- type: AMAZON_ELASTICSEARCH
name: elasticsource
config:
# endpoint resolves as 'http://localhost:9200'
endpoint:
Fn::Join:
- ''
- - https://
- Fn::GetAtt:
- ElasticSearchInstance
- DomainEndpoint
Key-value mock notation
In some special cases you will need to use key-value mock nottation. Good example can be case when you need to include serverless stage value (${self:provider.stage}) in the import name.
This notation can be used with all mocks - refMap, getAttMap and importValueMap
provider:
environment:
FINISH_ACTIVITY_FUNCTION_ARN:
Fn::ImportValue: other-service-api-${self:provider.stage}-url
custom:
serverless-appsync-simulator:
importValueMap:
- key: other-service-api-${self:provider.stage}-url
value: 'https://other.api.url.com/graphql'
Limitations
This plugin only tries to resolve the following parts of the yml tree:
provider.environmentfunctions[*].environmentcustom.appSync
If you have the need of resolving others, feel free to open an issue and explain your use case.
For now, the supported resources to be automatically resovled by Ref: are:
- DynamoDb tables
- S3 Buckets
Feel free to open a PR or an issue to extend them as well.
External functions
When a function is not defined withing the current serverless file you can still call it by providing an invoke url which should point to a REST method. Make sure you specify "get" or "post" for the method. Default is "get", but you probably want "post".
custom:
appsync-simulator:
functions:
addUser:
url: http://localhost:3016/2015-03-31/functions/addUser/invocations
method: post
addPost:
url: https://jsonplaceholder.typicode.com/posts
method: post
Supported Resolver types
This plugin supports resolvers implemented by amplify-appsync-simulator, as well as custom resolvers.
From Aws Amplify:
- NONE
- AWS_LAMBDA
- AMAZON_DYNAMODB
- PIPELINE
Implemented by this plugin
- AMAZON_ELASTIC_SEARCH
- HTTP
- RELATIONAL_DATABASE
Relational Database
Sample VTL for a create mutation
#set( $cols = [] )
#set( $vals = [] )
#foreach( $entry in $ctx.args.input.keySet() )
#set( $regex = "([a-z])([A-Z]+)")
#set( $replacement = "$1_$2")
#set( $toSnake = $entry.replaceAll($regex, $replacement).toLowerCase() )
#set( $discard = $cols.add("$toSnake") )
#if( $util.isBoolean($ctx.args.input[$entry]) )
#if( $ctx.args.input[$entry] )
#set( $discard = $vals.add("1") )
#else
#set( $discard = $vals.add("0") )
#end
#else
#set( $discard = $vals.add("'$ctx.args.input[$entry]'") )
#end
#end
#set( $valStr = $vals.toString().replace("[","(").replace("]",")") )
#set( $colStr = $cols.toString().replace("[","(").replace("]",")") )
#if ( $valStr.substring(0, 1) != '(' )
#set( $valStr = "($valStr)" )
#end
#if ( $colStr.substring(0, 1) != '(' )
#set( $colStr = "($colStr)" )
#end
{
"version": "2018-05-29",
"statements": ["INSERT INTO <name-of-table> $colStr VALUES $valStr", "SELECT * FROM <name-of-table> ORDER BY id DESC LIMIT 1"]
}
Sample VTL for an update mutation
#set( $update = "" )
#set( $equals = "=" )
#foreach( $entry in $ctx.args.input.keySet() )
#set( $cur = $ctx.args.input[$entry] )
#set( $regex = "([a-z])([A-Z]+)")
#set( $replacement = "$1_$2")
#set( $toSnake = $entry.replaceAll($regex, $replacement).toLowerCase() )
#if( $util.isBoolean($cur) )
#if( $cur )
#set ( $cur = "1" )
#else
#set ( $cur = "0" )
#end
#end
#if ( $util.isNullOrEmpty($update) )
#set($update = "$toSnake$equals'$cur'" )
#else
#set($update = "$update,$toSnake$equals'$cur'" )
#end
#end
{
"version": "2018-05-29",
"statements": ["UPDATE <name-of-table> SET $update WHERE id=$ctx.args.input.id", "SELECT * FROM <name-of-table> WHERE id=$ctx.args.input.id"]
}
Sample resolver for delete mutation
{
"version": "2018-05-29",
"statements": ["UPDATE <name-of-table> set deleted_at=NOW() WHERE id=$ctx.args.id", "SELECT * FROM <name-of-table> WHERE id=$ctx.args.id"]
}
Sample mutation response VTL with support for handling AWSDateTime
#set ( $index = -1)
#set ( $result = $util.parseJson($ctx.result) )
#set ( $meta = $result.sqlStatementResults[1].columnMetadata)
#foreach ($column in $meta)
#set ($index = $index + 1)
#if ( $column["typeName"] == "timestamptz" )
#set ($time = $result["sqlStatementResults"][1]["records"][0][$index]["stringValue"] )
#set ( $nowEpochMillis = $util.time.parseFormattedToEpochMilliSeconds("$time.substring(0,19)+0000", "yyyy-MM-dd HH:mm:ssZ") )
#set ( $isoDateTime = $util.time.epochMilliSecondsToISO8601($nowEpochMillis) )
$util.qr( $result["sqlStatementResults"][1]["records"][0][$index].put("stringValue", "$isoDateTime") )
#end
#end
#set ( $res = $util.parseJson($util.rds.toJsonString($util.toJson($result)))[1][0] )
#set ( $response = {} )
#foreach($mapKey in $res.keySet())
#set ( $s = $mapKey.split("_") )
#set ( $camelCase="" )
#set ( $isFirst=true )
#foreach($entry in $s)
#if ( $isFirst )
#set ( $first = $entry.substring(0,1) )
#else
#set ( $first = $entry.substring(0,1).toUpperCase() )
#end
#set ( $isFirst=false )
#set ( $stringLength = $entry.length() )
#set ( $remaining = $entry.substring(1, $stringLength) )
#set ( $camelCase = "$camelCase$first$remaining" )
#end
$util.qr( $response.put("$camelCase", $res[$mapKey]) )
#end
$utils.toJson($response)
Using Variable Map
Variable map support is limited and does not differentiate numbers and strings data types, please inject them directly if needed.
Will be escaped properly: null, true, and false values.
{
"version": "2018-05-29",
"statements": [
"UPDATE <name-of-table> set deleted_at=NOW() WHERE id=:ID",
"SELECT * FROM <name-of-table> WHERE id=:ID and unix_timestamp > $ctx.args.newerThan"
],
variableMap: {
":ID": $ctx.args.id,
## ":TIMESTAMP": $ctx.args.newerThan -- This will be handled as a string!!!
}
}Requires
- serverless framework
- serverless-appsync-plugin
- serverless-offline
- serverless-dynamodb-local (when using dynamodb resolvers only)
- watchman (if Hot-reloading is desactivated it is not required)
Author: Serverless-appsync
Source Code: https://github.com/serverless-appsync/serverless-appsync-simulator
License: MIT License
1677668905
TS-mockito: Mocking Library for TypeScript
TS-mockito
Mocking library for TypeScript inspired by http://mockito.org/
1.x to 2.x migration guide
Main features
- Strongly typed
- IDE autocomplete
- Mock creation (
mock) (also abstract classes) #example - Spying on real objects (
spy) #example - Changing mock behavior (
when) via: - Checking if methods were called with given arguments (
verify) - Resetting mock (
reset,resetCalls) #example, #example - Capturing arguments passed to method (
capture) #example - Recording multiple behaviors #example
- Readable error messages (ex.
'Expected "convertNumberToString(strictEqual(3))" to be called 2 time(s). But has been called 1 time(s).')
Installation
npm install ts-mockito --save-dev
Usage
Basics
// Creating mock
let mockedFoo:Foo = mock(Foo);
// Getting instance from mock
let foo:Foo = instance(mockedFoo);
// Using instance in source code
foo.getBar(3);
foo.getBar(5);
// Explicit, readable verification
verify(mockedFoo.getBar(3)).called();
verify(mockedFoo.getBar(anything())).called();
Stubbing method calls
// Creating mock
let mockedFoo:Foo = mock(Foo);
// stub method before execution
when(mockedFoo.getBar(3)).thenReturn('three');
// Getting instance
let foo:Foo = instance(mockedFoo);
// prints three
console.log(foo.getBar(3));
// prints null, because "getBar(999)" was not stubbed
console.log(foo.getBar(999));
Stubbing getter value
// Creating mock
let mockedFoo:Foo = mock(Foo);
// stub getter before execution
when(mockedFoo.sampleGetter).thenReturn('three');
// Getting instance
let foo:Foo = instance(mockedFoo);
// prints three
console.log(foo.sampleGetter);
Stubbing property values that have no getters
Syntax is the same as with getter values.
Please note, that stubbing properties that don't have getters only works if Proxy object is available (ES6).
Call count verification
// Creating mock
let mockedFoo:Foo = mock(Foo);
// Getting instance
let foo:Foo = instance(mockedFoo);
// Some calls
foo.getBar(1);
foo.getBar(2);
foo.getBar(2);
foo.getBar(3);
// Call count verification
verify(mockedFoo.getBar(1)).once(); // was called with arg === 1 only once
verify(mockedFoo.getBar(2)).twice(); // was called with arg === 2 exactly two times
verify(mockedFoo.getBar(between(2, 3))).thrice(); // was called with arg between 2-3 exactly three times
verify(mockedFoo.getBar(anyNumber()).times(4); // was called with any number arg exactly four times
verify(mockedFoo.getBar(2)).atLeast(2); // was called with arg === 2 min two times
verify(mockedFoo.getBar(anything())).atMost(4); // was called with any argument max four times
verify(mockedFoo.getBar(4)).never(); // was never called with arg === 4
Call order verification
// Creating mock
let mockedFoo:Foo = mock(Foo);
let mockedBar:Bar = mock(Bar);
// Getting instance
let foo:Foo = instance(mockedFoo);
let bar:Bar = instance(mockedBar);
// Some calls
foo.getBar(1);
bar.getFoo(2);
// Call order verification
verify(mockedFoo.getBar(1)).calledBefore(mockedBar.getFoo(2)); // foo.getBar(1) has been called before bar.getFoo(2)
verify(mockedBar.getFoo(2)).calledAfter(mockedFoo.getBar(1)); // bar.getFoo(2) has been called before foo.getBar(1)
verify(mockedFoo.getBar(1)).calledBefore(mockedBar.getFoo(999999)); // throws error (mockedBar.getFoo(999999) has never been called)
Throwing errors
let mockedFoo:Foo = mock(Foo);
when(mockedFoo.getBar(10)).thenThrow(new Error('fatal error'));
let foo:Foo = instance(mockedFoo);
try {
foo.getBar(10);
} catch (error:Error) {
console.log(error.message); // 'fatal error'
}
Custom function
You can also stub method with your own implementation
let mockedFoo:Foo = mock(Foo);
let foo:Foo = instance(mockedFoo);
when(mockedFoo.sumTwoNumbers(anyNumber(), anyNumber())).thenCall((arg1:number, arg2:number) => {
return arg1 * arg2;
});
// prints '50' because we've changed sum method implementation to multiply!
console.log(foo.sumTwoNumbers(5, 10));
Resolving / rejecting promises
You can also stub method to resolve / reject promise
let mockedFoo:Foo = mock(Foo);
when(mockedFoo.fetchData("a")).thenResolve({id: "a", value: "Hello world"});
when(mockedFoo.fetchData("b")).thenReject(new Error("b does not exist"));
Resetting mock calls
You can reset just mock call counter
// Creating mock
let mockedFoo:Foo = mock(Foo);
// Getting instance
let foo:Foo = instance(mockedFoo);
// Some calls
foo.getBar(1);
foo.getBar(1);
verify(mockedFoo.getBar(1)).twice(); // getBar with arg "1" has been called twice
// Reset mock
resetCalls(mockedFoo);
// Call count verification
verify(mockedFoo.getBar(1)).never(); // has never been called after reset
You can also reset calls of multiple mocks at once resetCalls(firstMock, secondMock, thirdMock)
Resetting mock
Or reset mock call counter with all stubs
// Creating mock
let mockedFoo:Foo = mock(Foo);
when(mockedFoo.getBar(1)).thenReturn("one").
// Getting instance
let foo:Foo = instance(mockedFoo);
// Some calls
console.log(foo.getBar(1)); // "one" - as defined in stub
console.log(foo.getBar(1)); // "one" - as defined in stub
verify(mockedFoo.getBar(1)).twice(); // getBar with arg "1" has been called twice
// Reset mock
reset(mockedFoo);
// Call count verification
verify(mockedFoo.getBar(1)).never(); // has never been called after reset
console.log(foo.getBar(1)); // null - previously added stub has been removed
You can also reset multiple mocks at once reset(firstMock, secondMock, thirdMock)
Capturing method arguments
let mockedFoo:Foo = mock(Foo);
let foo:Foo = instance(mockedFoo);
// Call method
foo.sumTwoNumbers(1, 2);
// Check first arg captor values
const [firstArg, secondArg] = capture(mockedFoo.sumTwoNumbers).last();
console.log(firstArg); // prints 1
console.log(secondArg); // prints 2
You can also get other calls using first(), second(), byCallIndex(3) and more...
Recording multiple behaviors
You can set multiple returning values for same matching values
const mockedFoo:Foo = mock(Foo);
when(mockedFoo.getBar(anyNumber())).thenReturn('one').thenReturn('two').thenReturn('three');
const foo:Foo = instance(mockedFoo);
console.log(foo.getBar(1)); // one
console.log(foo.getBar(1)); // two
console.log(foo.getBar(1)); // three
console.log(foo.getBar(1)); // three - last defined behavior will be repeated infinitely
Another example with specific values
let mockedFoo:Foo = mock(Foo);
when(mockedFoo.getBar(1)).thenReturn('one').thenReturn('another one');
when(mockedFoo.getBar(2)).thenReturn('two');
let foo:Foo = instance(mockedFoo);
console.log(foo.getBar(1)); // one
console.log(foo.getBar(2)); // two
console.log(foo.getBar(1)); // another one
console.log(foo.getBar(1)); // another one - this is last defined behavior for arg '1' so it will be repeated
console.log(foo.getBar(2)); // two
console.log(foo.getBar(2)); // two - this is last defined behavior for arg '2' so it will be repeated
Short notation:
const mockedFoo:Foo = mock(Foo);
// You can specify return values as multiple thenReturn args
when(mockedFoo.getBar(anyNumber())).thenReturn('one', 'two', 'three');
const foo:Foo = instance(mockedFoo);
console.log(foo.getBar(1)); // one
console.log(foo.getBar(1)); // two
console.log(foo.getBar(1)); // three
console.log(foo.getBar(1)); // three - last defined behavior will be repeated infinity
Possible errors:
const mockedFoo:Foo = mock(Foo);
// When multiple matchers, matches same result:
when(mockedFoo.getBar(anyNumber())).thenReturn('one');
when(mockedFoo.getBar(3)).thenReturn('one');
const foo:Foo = instance(mockedFoo);
foo.getBar(3); // MultipleMatchersMatchSameStubError will be thrown, two matchers match same method call
Mocking interfaces
You can mock interfaces too, just instead of passing type to mock function, set mock function generic type Mocking interfaces requires Proxy implementation
let mockedFoo:Foo = mock<FooInterface>(); // instead of mock(FooInterface)
const foo: SampleGeneric<FooInterface> = instance(mockedFoo);
Mocking types
You can mock abstract classes
const mockedFoo: SampleAbstractClass = mock(SampleAbstractClass);
const foo: SampleAbstractClass = instance(mockedFoo);
You can also mock generic classes, but note that generic type is just needed by mock type definition
const mockedFoo: SampleGeneric<SampleInterface> = mock(SampleGeneric);
const foo: SampleGeneric<SampleInterface> = instance(mockedFoo);
Spying on real objects
You can partially mock an existing instance:
const foo: Foo = new Foo();
const spiedFoo = spy(foo);
when(spiedFoo.getBar(3)).thenReturn('one');
console.log(foo.getBar(3)); // 'one'
console.log(foo.getBaz()); // call to a real method
You can spy on plain objects too:
const foo = { bar: () => 42 };
const spiedFoo = spy(foo);
foo.bar();
console.log(capture(spiedFoo.bar).last()); // [42]
Thanks
- Szczepan Faber (https://www.linkedin.com/in/szczepiq)
- Sebastian Konkol (https://www.linkedin.com/in/sebastiankonkol)
- Clickmeeting (http://clickmeeting.com)
- Michał Stocki (https://github.com/michalstocki)
- Łukasz Bendykowski (https://github.com/viman)
- Andrey Ermakov (https://github.com/dreef3)
- Markus Ende (https://github.com/Markus-Ende)
- Thomas Hilzendegen (https://github.com/thomashilzendegen)
- Johan Blumenberg (https://github.com/johanblumenberg)
Download Details:
Author: NagRock
Source Code: https://github.com/NagRock/ts-mockito
License: MIT license
1648972740
Generis: Versatile Go Code Generator
Generis
Versatile Go code generator.
Description
Generis is a lightweight code preprocessor adding the following features to the Go language :
- Generics.
- Free-form macros.
- Conditional compilation.
- HTML templating.
- Allman style conversion.
Sample
package main;
// -- IMPORTS
import (
"html"
"io"
"log"
"net/http"
"net/url"
"strconv"
);
// -- DEFINITIONS
#define DebugMode
#as true
// ~~
#define HttpPort
#as 8080
// ~~
#define WriteLine( {{text}} )
#as log.Println( {{text}} )
// ~~
#define local {{variable}} : {{type}};
#as var {{variable}} {{type}};
// ~~
#define DeclareStack( {{type}}, {{name}} )
#as
// -- TYPES
type {{name}}Stack struct
{
ElementArray []{{type}};
}
// -- INQUIRIES
func ( stack * {{name}}Stack ) IsEmpty(
) bool
{
return len( stack.ElementArray ) == 0;
}
// -- OPERATIONS
func ( stack * {{name}}Stack ) Push(
element {{type}}
)
{
stack.ElementArray = append( stack.ElementArray, element );
}
// ~~
func ( stack * {{name}}Stack ) Pop(
) {{type}}
{
local
element : {{type}};
element = stack.ElementArray[ len( stack.ElementArray ) - 1 ];
stack.ElementArray = stack.ElementArray[ : len( stack.ElementArray ) - 1 ];
return element;
}
#end
// ~~
#define DeclareStack( {{type}} )
#as DeclareStack( {{type}}, {{type:PascalCase}} )
// -- TYPES
DeclareStack( string )
DeclareStack( int32 )
// -- FUNCTIONS
func HandleRootPage(
response_writer http.ResponseWriter,
request * http.Request
)
{
local
boolean : bool;
local
natural : uint;
local
integer : int;
local
real : float64;
local
escaped_html_text,
escaped_url_text,
text : string;
local
integer_stack : Int32Stack;
boolean = true;
natural = 10;
integer = 20;
real = 30.0;
text = "text";
escaped_url_text = "&escaped text?";
escaped_html_text = "<escaped text/>";
integer_stack.Push( 10 );
integer_stack.Push( 20 );
integer_stack.Push( 30 );
#write response_writer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%= request.URL.Path %></title>
</head>
<body>
<% if ( boolean ) { %>
<%= "URL : " + request.URL.Path %>
<br/>
<%@ natural %>
<%# integer %>
<%& real %>
<br/>
<%~ text %>
<%^ escaped_url_text %>
<%= escaped_html_text %>
<%= "<%% ignored %%>" %>
<%% ignored %%>
<% } %>
<br/>
Stack :
<br/>
<% for !integer_stack.IsEmpty() { %>
<%# integer_stack.Pop() %>
<% } %>
</body>
</html>
#end
}
// ~~
func main()
{
http.HandleFunc( "/", HandleRootPage );
#if DebugMode
WriteLine( "Listening on http://localhost:HttpPort" );
#end
log.Fatal(
http.ListenAndServe( ":HttpPort", nil )
);
}
Syntax
#define directive
Constants and generic code can be defined with the following syntax :
#define old code
#as new code
#define old code
#as
new
code
#end
#define
old
code
#as new code
#define
old
code
#as
new
code
#end
#define parameter
The #define directive can contain one or several parameters :
{{variable name}} : hierarchical code (with properly matching brackets and parentheses)
{{variable name#}} : statement code (hierarchical code without semicolon)
{{variable name$}} : plain code
{{variable name:boolean expression}} : conditional hierarchical code
{{variable name#:boolean expression}} : conditional statement code
{{variable name$:boolean expression}} : conditional plain code
They can have a boolean expression to require they match specific conditions :
HasText text
HasPrefix prefix
HasSuffix suffix
HasIdentifier text
false
true
!expression
expression && expression
expression || expression
( expression )
The #define directive must not start or end with a parameter.
#as parameter
The #as directive can use the value of the #define parameters :
{{variable name}}
{{variable name:filter function}}
{{variable name:filter function:filter function:...}}
Their value can be changed through one or several filter functions :
LowerCase
UpperCase
MinorCase
MajorCase
SnakeCase
PascalCase
CamelCase
RemoveComments
RemoveBlanks
PackStrings
PackIdentifiers
ReplacePrefix old_prefix new_prefix
ReplaceSuffix old_suffix new_suffix
ReplaceText old_text new_text
ReplaceIdentifier old_identifier new_identifier
AddPrefix prefix
AddSuffix suffix
RemovePrefix prefix
RemoveSuffix suffix
RemoveText text
RemoveIdentifier identifier
#if directive
Conditional code can be defined with the following syntax :
#if boolean expression
#if boolean expression
...
#else
...
#end
#else
#if boolean expression
...
#else
...
#end
#end
The boolean expression can use the following operators :
false
true
!expression
expression && expression
expression || expression
( expression )
#write directive
Templated HTML code can be sent to a stream writer using the following syntax :
#write writer expression
<% code %>
<%@ natural expression %>
<%# integer expression %>
<%& real expression %>
<%~ text expression %>
<%= escaped text expression %>
<%! removed content %>
<%% ignored tags %%>
#end
Limitations
- There is no operator precedence in boolean expressions.
- The
--joinoption requires to end the statements with a semicolon. - The
#writerdirective is only available for the Go language.
Installation
Install the DMD 2 compiler (using the MinGW setup option on Windows).
Build the executable with the following command line :
dmd -m64 generis.d
Command line
generis [options]
Options
--prefix # : set the command prefix
--parse INPUT_FOLDER/ : parse the definitions of the Generis files in the input folder
--process INPUT_FOLDER/ OUTPUT_FOLDER/ : reads the Generis files in the input folder and writes the processed files in the output folder
--trim : trim the HTML templates
--join : join the split statements
--create : create the output folders if needed
--watch : watch the Generis files for modifications
--pause 500 : time to wait before checking the Generis files again
--tabulation 4 : set the tabulation space count
--extension .go : generate files with this extension
Examples
generis --process GS/ GO/
Reads the Generis files in the GS/ folder and writes Go files in the GO/ folder.
generis --process GS/ GO/ --create
Reads the Generis files in the GS/ folder and writes Go files in the GO/ folder, creating the output folders if needed.
generis --process GS/ GO/ --create --watch
Reads the Generis files in the GS/ folder and writes Go files in the GO/ folder, creating the output folders if needed and watching the Generis files for modifications.
generis --process GS/ GO/ --trim --join --create --watch
Reads the Generis files in the GS/ folder and writes Go files in the GO/ folder, trimming the HTML templates, joining the split statements, creating the output folders if needed and watching the Generis files for modifications.
Version
2.0
Author: Senselogic
Source Code: https://github.com/senselogic/GENERIS
License: View license
1599768000
How To Integrate Admin Template in Angular
Angular is an open-source, JavaScript framework written in TypeScript. Google maintains it, and its primary purpose is to develop single-page applications. As a framework, Angular has clear advantages while also providing a standard structure for developers to work with. It enables users to create large applications in a maintainable manner.
In this tutorial, We will learn how to integrate admin template in Angular. First we need to download that Angular CLI, then we need to create our project.
To integrate admin pattern in Angular application. Let's start with the following steps.
Step: 1
If you are in Windows, then open your CMD in Administrator mode and type the following command.
npm install -g @angular/cliIf you are on a Mac or Linux, type the following command.
sudo npm install -g @angular/cliIt will take some time to download the CLI and then install NPM packages.
Step: 2
Type the following command in your terminal.
ng new projectnameThis will create required folders to Up and Running with our Application and install all the NPM packages. This will also take a while.
Step: 3
Go to that project directory and type the following command in your terminal.
cd projectnameNow to start our Angular application, type the following command.
ng serveYou can also hit the below command.
npm startIn your command window, you can see the compilation process is already started, and finally, a webpack is compiled, and our application will be hosted on http://localhost:4200.
I have named my project angular so; its directory structure will look like this.
Step: 4
We first need to choose which admin template we need to integrate, so in this project, I have chosen Material Design Template. It is an HTML and CSS template, which we need to integrate into our Angular application.
Angular app’s main index.html file has the following code.
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular4</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>If you see carefully in the above file, then in the body tag, you can see our Angular-specific tag like <app-root> </app-root>. This tag helps us to bootstrap our application.
Step: 5
If you navigate to src >> app >> app.component.html, then this file has default view, which is what we see right now. So first of all, clean that whole file, and when you save that file, the webpack will automatically compile and restart the server, and your browser will be automatically refreshed, and you can see your updated changes.
src >> main.ts: This file is our starter file, which bootstraps our Angular Application. It includes our app module file, which resides in src >> app >>app.module.ts
Our src >> main.ts file will look like this.
// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);Step: 6
Now go to src >> app >> app.module.ts: This file is a module in which all our new application-specific components are residing. This file looks like this.
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Here right now, we have only one component that is there so, AppComponent is imported in this file.
Step: 7
Navigate to src >> app >> app.component.ts: This file is the kind of Controller file for your particular component, you can say. This file is a TypeScript class file that has the template and related to CSS is defined. So that particular component will use that particular HTML and CSS. So this file looks like this.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}Step: 8
We need to define our components, and if we want to build an admin template, we first need to divide our HTML Material template into Navbar, Sidebar, and Content areas. So, we need to create that particular component. So we can generate new components by typing the following command.
ng generate component navbar
or
ng g c navbarThis created a folder in the src >> app directory called the navbar. If you open that folder, then you can see its HTML file, TypeScript file, and also a test file. Also, after creating your component, the app.module.ts file is automatically updated.
Step: 9
First, we need to include all of our admin template-specific CSS, JS and Images, and store them into the src >> assets folder. So your index.html file will look like this.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to project</title>
<base href="/">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
<!-- Bootstrap Core Css -->
<link href="assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<!-- Waves Effect Css -->
<link href="assets/plugins/node-waves/waves.css" rel="stylesheet" />
<!-- Animation Css -->
<link href="assets/plugins/animate-css/animate.css" rel="stylesheet" />
<!-- Morris Chart Css-->
<!-- <link href="plugins/morrisjs/morris.css" rel="stylesheet" /> -->
<!-- Custom Css -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
<!-- Morris Chart Css-->
<!-- <link href="public/plugins/morrisjs/morris.css" rel="stylesheet" /> -->
</head>
<body class="theme-red">
<app-root></app-root>
<!-- Jquery Core Js -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="assets/plugins/bootstrap/js/bootstrap.js"></script>
<!-- Select Plugin Js -->
<!-- <script src="plugins/bootstrap-select/js/bootstrap-select.js"></script> -->
<!-- Slimscroll Plugin Js -->
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- Waves Effect Plugin Js -->
<script src="assets/plugins/node-waves/waves.js"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="assets/plugins/jquery-countto/jquery.countTo.js"></script>
<script src="assets/js/admin.js"></script>
<script src="assets/js/pages/index.js"></script>
</body>
</html>Copy all the CSS, JS, Images, and Plugin files from the Material Admin Template to the src >> assets folder.
Step: 10
You can add the following code to the navbar.component.html.
<!-- navbar.component.html -->
<!-- Page Loader -->
<!-- <div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div> -->
<div class="overlay"></div>
<!-- Search Bar -->
<div class="search-bar">
<div class="search-icon">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div>
<!-- #END# Search Bar -->
<!-- Top Bar -->
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
<a href="javascript:void(0);" class="bars"></a>
<a class="navbar-brand" routerLink="/dashboard">ERPCMS</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Call Search -->
<li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
<!-- #END# Call Search -->
<!-- Notifications -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
<i class="material-icons">notifications</i>
<span class="label-count">7</span>
</a>
<ul class="dropdown-menu">
<li class="header">NOTIFICATIONS</li>
<li class="body">
<ul class="menu">
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">person_add</i>
</div>
<div class="menu-info">
<h4>12 new members joined</h4>
<p>
<i class="material-icons">access_time</i> 14 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-cyan">
<i class="material-icons">add_shopping_cart</i>
</div>
<div class="menu-info">
<h4>4 sales made</h4>
<p>
<i class="material-icons">access_time</i> 22 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-red">
<i class="material-icons">delete_forever</i>
</div>
<div class="menu-info">
<h4><b>Nancy Doe</b> deleted account</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-orange">
<i class="material-icons">mode_edit</i>
</div>
<div class="menu-info">
<h4><b>Nancy</b> changed name</h4>
<p>
<i class="material-icons">access_time</i> 2 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-blue-grey">
<i class="material-icons">comment</i>
</div>
<div class="menu-info">
<h4><b>John</b> commented your post</h4>
<p>
<i class="material-icons">access_time</i> 4 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">cached</i>
</div>
<div class="menu-info">
<h4><b>John</b> updated status</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-purple">
<i class="material-icons">settings</i>
</div>
<div class="menu-info">
<h4>Settings updated</h4>
<p>
<i class="material-icons">access_time</i> Yesterday
</p>
</div>
</a>
</li>
</ul>
</li>
<li class="footer">
<a href="javascript:void(0);">View All Notifications</a>
</li>
</ul>
</li>
<!-- #END# Notifications -->
<!-- Tasks -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
<i class="material-icons">flag</i>
<span class="label-count">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">TASKS</li>
<li class="body">
<ul class="menu tasks">
<li>
<a href="javascript:void(0);">
<h4>
Footer display issue
<small>32%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 32%">
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h4>
Make new buttons
<small>45%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-cyan" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h4>
Create new dashboard
<small>54%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-teal" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 54%">
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h4>
Solve transition issue
<small>65%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 65%">
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<h4>
Answer GitHub questions
<small>92%</small>
</h4>
<div class="progress">
<div class="progress-bar bg-purple" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 92%">
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="footer">
<a href="javascript:void(0);">View All Tasks</a>
</li>
</ul>
</li>
<!-- #END# Tasks -->
<li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</div>
</nav>
<!-- #Top Bar -->Step: 11
Put the following code into the src >> app >> app.component.html.
<!-- app.component.html -->
<app-navbar></app-navbar>Go to the navbar.component.ts file.
// navbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
So finally, your page will look like this with only Navigation Bar.
Step: 12
We need to create another two components: 1) Sidebar 2)Content. Again, use the same method to generate components.
ng g c sidebarng g c content
Step: 13
Put the following code into the src >> app >> sidebar >> sidebar.component.html
<!-- sidebar.component.html -->
<section>
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="user-info">
<div class="image">
<img src="assets/images/user.png" width="48" height="48" alt="User" />
</div>
<div class="info-container">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">John Doe</div>
<div class="email">john.doe@example.com</div>
<div class="btn-group user-helper-dropdown">
<i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>
<li role="seperator" class="divider"></li>
<li><a href="javascript:void(0);"><i class="material-icons">group</i>Followers</a></li>
<li><a href="javascript:void(0);"><i class="material-icons">shopping_cart</i>Sales</a></li>
<li><a href="javascript:void(0);"><i class="material-icons">favorite</i>Likes</a></li>
<li role="seperator" class="divider"></li>
<li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>
</ul>
</div>
</div>
</div>
<!-- #User Info -->
<!-- Menu -->
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="active">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">view_list</i>
<span>Users</span>
</a>
<ul class="ml-menu">
<li>
<a href="#">Admin</a>
</li>
<li>
<a href="pages/tables/jquery-datatable.html">Customers</a>
</li>
<li>
<a href="pages/tables/editable-table.html">Suppliers</a>
</li>
</ul>
</li>
<li>
<a href="pages/helper-classes.html">
<i class="material-icons">layers</i>
<span>Helper Classes</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">widgets</i>
<span>Widgets</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Cards</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/widgets/cards/basic.html">Basic</a>
</li>
<li>
<a href="pages/widgets/cards/colored.html">Colored</a>
</li>
<li>
<a href="pages/widgets/cards/no-header.html">No Header</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Infobox</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/widgets/infobox/infobox-1.html">Infobox-1</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-2.html">Infobox-2</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-3.html">Infobox-3</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-4.html">Infobox-4</a>
</li>
<li>
<a href="pages/widgets/infobox/infobox-5.html">Infobox-5</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">swap_calls</i>
<span>User Interface (UI)</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/ui/alerts.html">Alerts</a>
</li>
<li>
<a href="pages/ui/animations.html">Animations</a>
</li>
<li>
<a href="pages/ui/badges.html">Badges</a>
</li>
<li>
<a href="pages/ui/breadcrumbs.html">Breadcrumbs</a>
</li>
<li>
<a href="pages/ui/buttons.html">Buttons</a>
</li>
<li>
<a href="pages/ui/collapse.html">Collapse</a>
</li>
<li>
<a href="pages/ui/colors.html">Colors</a>
</li>
<li>
<a href="pages/ui/dialogs.html">Dialogs</a>
</li>
<li>
<a href="pages/ui/icons.html">Icons</a>
</li>
<li>
<a href="pages/ui/labels.html">Labels</a>
</li>
<li>
<a href="pages/ui/list-group.html">List Group</a>
</li>
<li>
<a href="pages/ui/media-object.html">Media Object</a>
</li>
<li>
<a href="pages/ui/modals.html">Modals</a>
</li>
<li>
<a href="pages/ui/notifications.html">Notifications</a>
</li>
<li>
<a href="pages/ui/pagination.html">Pagination</a>
</li>
<li>
<a href="pages/ui/preloaders.html">Preloaders</a>
</li>
<li>
<a href="pages/ui/progressbars.html">Progress Bars</a>
</li>
<li>
<a href="pages/ui/range-sliders.html">Range Sliders</a>
</li>
<li>
<a href="pages/ui/sortable-nestable.html">Sortable & Nestable</a>
</li>
<li>
<a href="pages/ui/tabs.html">Tabs</a>
</li>
<li>
<a href="pages/ui/thumbnails.html">Thumbnails</a>
</li>
<li>
<a href="pages/ui/tooltips-popovers.html">Tooltips & Popovers</a>
</li>
<li>
<a href="pages/ui/waves.html">Waves</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">assignment</i>
<span>Forms</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/forms/basic-form-elements.html">Basic Form Elements</a>
</li>
<li>
<a href="pages/forms/advanced-form-elements.html">Advanced Form Elements</a>
</li>
<li>
<a href="pages/forms/form-examples.html">Form Examples</a>
</li>
<li>
<a href="pages/forms/form-validation.html">Form Validation</a>
</li>
<li>
<a href="pages/forms/form-wizard.html">Form Wizard</a>
</li>
<li>
<a href="pages/forms/editors.html">Editors</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">view_list</i>
<span>Tables</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/tables/normal-tables.html">Normal Tables</a>
</li>
<li>
<a href="pages/tables/jquery-datatable.html">Jquery Datatables</a>
</li>
<li>
<a href="pages/tables/editable-table.html">Editable Tables</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">perm_media</i>
<span>Medias</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/medias/image-gallery.html">Image Gallery</a>
</li>
<li>
<a href="pages/medias/carousel.html">Carousel</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">pie_chart</i>
<span>Charts</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/charts/morris.html">Morris</a>
</li>
<li>
<a href="pages/charts/flot.html">Flot</a>
</li>
<li>
<a href="pages/charts/chartjs.html">ChartJS</a>
</li>
<li>
<a href="pages/charts/sparkline.html">Sparkline</a>
</li>
<li>
<a href="pages/charts/jquery-knob.html">Jquery Knob</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">content_copy</i>
<span>Example Pages</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/examples/sign-in.html">Sign In</a>
</li>
<li>
<a href="pages/examples/sign-up.html">Sign Up</a>
</li>
<li>
<a href="pages/examples/forgot-password.html">Forgot Password</a>
</li>
<li>
<a href="pages/examples/blank.html">Blank Page</a>
</li>
<li>
<a href="pages/examples/404.html">404 - Not Found</a>
</li>
<li>
<a href="pages/examples/500.html">500 - Server Error</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">map</i>
<span>Maps</span>
</a>
<ul class="ml-menu">
<li>
<a href="pages/maps/google.html">Google Map</a>
</li>
<li>
<a href="pages/maps/yandex.html">YandexMap</a>
</li>
<li>
<a href="pages/maps/jvectormap.html">jVectorMap</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">trending_down</i>
<span>Multi Level Menu</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);">
<span>Menu Item</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<span>Menu Item - 2</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Level - 2</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);">
<span>Menu Item</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<span>Level - 3</span>
</a>
<ul class="ml-menu">
<li>
<a href="javascript:void(0);">
<span>Level - 4</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="pages/changelogs.html">
<i class="material-icons">update</i>
<span>Changelogs</span>
</a>
</li>
<li class="header">LABELS</li>
<li>
<a href="javascript:void(0);">
<i class="material-icons col-red">donut_large</i>
<span>Important</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<i class="material-icons col-amber">donut_large</i>
<span>Warning</span>
</a>
</li>
<li>
<a href="javascript:void(0);">
<i class="material-icons col-light-blue">donut_large</i>
<span>Information</span>
</a>
</li>
</ul>
</div>
<!-- #Menu -->
<!-- Footer -->
<div class="legal">
<div class="copyright">
© 2016 <a href="javascript:void(0);">AdminBSB - Material Design</a>.
</div>
<div class="version">
<b>Version: </b> 1.0.4
</div>
</div>
<!-- #Footer -->
</aside>
<!-- #END# Left Sidebar -->
<!-- Right Sidebar -->
<aside id="rightsidebar" class="right-sidebar">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
<li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active in active" id="skins">
<ul class="demo-choose-skin">
<li data-theme="red" class="active">
<div class="red"></div>
<span>Red</span>
</li>
<li data-theme="pink">
<div class="pink"></div>
<span>Pink</span>
</li>
<li data-theme="purple">
<div class="purple"></div>
<span>Purple</span>
</li>
<li data-theme="deep-purple">
<div class="deep-purple"></div>
<span>Deep Purple</span>
</li>
<li data-theme="indigo">
<div class="indigo"></div>
<span>Indigo</span>
</li>
<li data-theme="blue">
<div class="blue"></div>
<span>Blue</span>
</li>
<li data-theme="light-blue">
<div class="light-blue"></div>
<span>Light Blue</span>
</li>
<li data-theme="cyan">
<div class="cyan"></div>
<span>Cyan</span>
</li>
<li data-theme="teal">
<div class="teal"></div>
<span>Teal</span>
</li>
<li data-theme="green">
<div class="green"></div>
<span>Green</span>
</li>
<li data-theme="light-green">
<div class="light-green"></div>
<span>Light Green</span>
</li>
<li data-theme="lime">
<div class="lime"></div>
<span>Lime</span>
</li>
<li data-theme="yellow">
<div class="yellow"></div>
<span>Yellow</span>
</li>
<li data-theme="amber">
<div class="amber"></div>
<span>Amber</span>
</li>
<li data-theme="orange">
<div class="orange"></div>
<span>Orange</span>
</li>
<li data-theme="deep-orange">
<div class="deep-orange"></div>
<span>Deep Orange</span>
</li>
<li data-theme="brown">
<div class="brown"></div>
<span>Brown</span>
</li>
<li data-theme="grey">
<div class="grey"></div>
<span>Grey</span>
</li>
<li data-theme="blue-grey">
<div class="blue-grey"></div>
<span>Blue Grey</span>
</li>
<li data-theme="black">
<div class="black"></div>
<span>Black</span>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
<div class="demo-settings">
<p>GENERAL SETTINGS</p>
<ul class="setting-list">
<li>
<span>Report Panel Usage</span>
<div class="switch">
<label><input type="checkbox" checked><span class="lever"></span></label>
</div>
</li>
<li>
<span>Email Redirect</span>
<div class="switch">
<label><input type="checkbox"><span class="lever"></span></label>
</div>
</li>
</ul>
<p>SYSTEM SETTINGS</p>
<ul class="setting-list">
<li>
<span>Notifications</span>
<div class="switch">
<label><input type="checkbox" checked><span class="lever"></span></label>
</div>
</li>
<li>
<span>Auto Updates</span>
<div class="switch">
<label><input type="checkbox" checked><span class="lever"></span></label>
</div>
</li>
</ul>
<p>ACCOUNT SETTINGS</p>
<ul class="setting-list">
<li>
<span>Offline</span>
<div class="switch">
<label><input type="checkbox"><span class="lever"></span></label>
</div>
</li>
<li>
<span>Location Permission</span>
<div class="switch">
<label><input type="checkbox" checked><span class="lever"></span></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</aside>
<!-- #END# Right Sidebar -->
</section>Now again, edit the app.component.html and add the following code.
<!-- app.component.html -->
<app-sidebar></app-sidebar>Step: 14
The last part content is remaining, which we have also generated the components, now integrate with this admin panel.
<!-- content.component.html -->
<section class="content">
<div class="container-fluid">
<div class="jumbotron">
Integrate Admin template in Angular
</div>
</div>
</section>Now finally, add the component to the app.component.html.
<!-- app.component.html -->
<app-content></app-content>
So our final app.component.html file will look like this.
<!-- app.component.html -->
<app-navbar></app-navbar>
<app-sidebar></app-sidebar>
<app-content></app-content>
After refreshing the page, our final output for our home page will look like this.
Finally, today’s task Integrate admin template in Angular application is complete.
Happy Coding !!!
#angular #typescript #microsoft #http
1605024026
Bootstrap Tutorial 2020 - Getting Started
In this video, I’ll be showing you how to quickly get started with Bootstrap.
#bootstrap tutorial #introduction #bootstrap 4 #bootstrap #bootstrap tutorial for beginners step by step #getting started