Skip to content

Instantly share code, notes, and snippets.

@paulharker

paulharker/app.html

Forked from jsobell/app.html
Last active May 8, 2016 18:01
Show Gist options
  • Save paulharker/bbb7c66ff12fc9c57af9abf3f7863f17 to your computer and use it in GitHub Desktop.
Save paulharker/bbb7c66ff12fc9c57af9abf3f7863f17 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic Routes With ChooseUser
Raw
app.html
<template>
<require from="nav-bar.html"></require>
<require from="styles.css"></require>
<require from="panels.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
Raw
app.js
import {Router, RouterConfiguration} from 'aurelia-router';
import {Configuration} from 'configuration';
import {inject} from 'aurelia-framework';
@inject(Configuration)
export class App {
configuration: Configuration;
router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'My App (Click on "Users")';
config.map([
{ route: ['', 'dashboard'], name: 'dashboard', moduleId: './dashboard', nav: true, title: 'Dashboard' },
{ route: 'users', name: 'users', moduleId: './users', nav: true, title: 'Users' }
]);
this.router = router;
}
constructor(config) {
this.configuration = config;
}
}
Raw
configuration.js
export class Configuration {
title: string;
newMenuItems = new Array();
actionItems = new Array();
bladeItems = {};
get hasActionItems(): boolean {
return (this.actionItems.length > 0 || false);
}
constructor(){
this.title = 'Configuration System';
this.newMenuItems = [
{
title: "Dashboard",
href: "#/dashboard"
},
{
title: "New Customer",
href: "#/customer"
},
{
title: "ROM Setup",
href: "#/setup"
}
];
this.bladeItems = {
background: "#e0e0e0",
color: "#808080",
title: "Setup",
items: [
{
title: "Favorites",
panel: "favorites"
},
{
title: "Profile",
image: "profile.jpg",
panel: "profile"
},
{
title: "Transactions",
// panel: "txDashboard",
panel: "child-blade",
subMenu : {
background : "#909090",
color: "#ffffff",
title: "Transactions",
items: [
{
title: "Public Receiving",
panel: "public-receiver"
},
{
title: "Payments",
panel: "payments"
}
]
}
},
{
title: "Printouts",
image: "printer.jpg",
panel: "printouts",
subMenu : {
background : "#e3e3e3",
color: "#808080",
title: "Printouts",
items: [
{
title: "Configuration",
image: "gears.jpg",
panel: "poConfig"
},
{
title: "Schedules",
image: "calnendar.jpg",
panel: "poSched"
}
]
}
}
]
};
}
loadModel(id) {
return Promise.resolve(this.bladeItems);
}
}
Raw
dashboard.html
<template>
<section class="au-animate">
<div >
<div class="message">${title}</div>
</div>
</section>
</template>
Raw
dashboard.js
export class Dashboard {
title = "App Dashboard";
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
nav-bar.html
<template bindable="router">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-bars"></i>
<span>${router.title}</span>
</a>
</div>
<!-- Navbar Buttons -->
<div id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
</li>
</ul>
</div>
</nav>
</template>
Raw
panels.css
html, body {
background-color:#e9eaed;
}
.panel-body {
width: 200px;
top: 50px;
}
.float-left {
float:left;
}
.content {
width:960px;
height:0px;
margin-right: auto;
margin-left: auto;
}
.nav-pills {
font-size: 1.3em;
}
.panel-group {
top: 100px;
width:430px;
z-index: 100;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}
.panel-heading {
width: 300px;
}
.panel-title {
line-height:40px;
font-weight: bold;
font-size: 1.5em;
}
.panel-title a {
float:right;
text-decoration:none;
padding: 10px 430px;
margin: -10px -430px;
}
.panel-body {
height:830px;
padding-top: 0;
}
.panel-group img {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group p {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group .panel img {
margin-left:400px;
position: absolute;
}
Raw
settings.html
<template>
<section class="au-animate row">
<div class="content-fluid">
<div class="panel panel-default float-left" >
<div class="panel-heading" style="background-color: ${panelColor}">
<span class="panel-title">${title}</span>
<!-- Search Box -->
<div class="row">
<div class="col-sm-12">
<div class="input-group blade-item">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- row -->
<div>
<div class="panel-body" style="background-color: ${panelColor}">
<ul class="nav nav-pills nav-stacked">
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-body float-left">
<router-view></router-view>
</div>
</div>
</section>
</template>
Raw
settings.js
import {Router, RouterConfiguration} from 'aurelia-router'
import {EventAggregator} from 'aurelia-event-aggregator';
import {Configuration} from 'configuration';
import {inject} from 'aurelia-framework';
@inject(Configuration, EventAggregator)
export class Settings {
// This module
_menuData = { color: '', textColor: '', items: [] };
panelColor: Number;
panelTextColor: Number;
configuration: Configuration;
title: string = "Settings";
// Router
router: Router;
config: RouterConfiguration;
routeMap = [];
// Event Aggregator
eventAggregator: EventAggregator;
subscription: { dispose: () => void };
constructor(config, EventAggregator) {
console.log('setup: constructor');
this.configuration = config;
this.eventAggregator = EventAggregator;
// hard coded route sample
this.routeMap = [
{ route: ['', 'dashboard'], name: 'dashboard', moduleId: 'dashboard', nav: true, title: 'Favorites' },
{ route: 'dashboard', name: 'dashboard2', moduleId: 'dashboard', nav: true, title: 'Profile' }
];
}
// menuData
get menuData() {
return this._menuData;
}
set menuData(value) {
this._menuData = value;
console.log("set menuData called");
}
activate(params, route) {
console.log('setup: activate for user', params.id);
if (params.id) {
this.title = "Settings " + params.id;
}
this.configuration.actionItems =
[
{
title: "New User",
href: "#/new-user"
},
{
title: "New Group",
href: "#/new-group"
},
{
title: "Delete User",
href: "#/delete-user"
}
];
}
configureRouter(config: RouterConfiguration, router: Router) {
console.log('setup: configureRouter');
this.router = router;
config.title = this.title;
config.map(this.routeMap);
}
}
Raw
styles.css
body {
margin: 0;
/*font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; */ /*PH 2016-04-07*/
}
.blade-item {
padding-bottom: 15px;
margin-bottom: 10px;
font-size: 18px;
}
#dockbar {
position: fixed;
padding-top:10px;
bottom: 0px;
left: 0px;
height: 130px;
width: 100%;
color: #fff;
background: #1b38e6;
}
#start-button {
width:140px;
height: 110px;
/*background: #646dcf*/
}
#task-button {
width: 160px;
height: 110px;
}
#primary-button {
width: 140px;
height: 110px;
}
#secondary-button {
width: 140px;
height: 110px;
}
#tertiery-button {
width: 40px;
height: 110px;
}
.splash {
text-align: center;
margin: 10% 0 0 0;
box-sizing: border-box;
}
.splash .message {
font-size: 72px;
line-height: 72px;
text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
text-transform: uppercase;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.splash .fa-spinner {
text-align: center;
display: inline-block;
font-size: 72px;
margin-top: 50px;
}
.page-host {
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
}
@media print {
.page-host {
position: absolute;
left: 10px;
right: 0;
top: 50px;
bottom: 0;
overflow-y: inherit;
overflow-x: inherit;
}
}
section {
margin: 0 20px;
}
.navbar-nav li.loader {
margin: 12px 24px 0 6px;
}
.pictureDetail {
max-width: 425px;
}
/* animate page transitions */
section.au-enter-active {
-webkit-animation: fadeInRight 0.4s;
animation: fadeInRight 0.4s;
}
div.au-stagger {
/* 50ms will be applied between each successive enter operation */
-webkit-animation-delay: 50ms;
animation-delay: 50ms;
}
.card-container.au-enter {
opacity: 0;
}
.card-container.au-enter-active {
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
.card {
overflow: hidden;
position: relative;
border: 1px solid #CCC;
border-radius: 8px;
text-align: center;
padding: 0;
background-color: #337ab7;
color: rgb(136, 172, 217);
margin-bottom: 32px;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
.card .content {
margin-top: 10px;
}
.card .content .name {
color: white;
text-shadow: 0 0 6px rgba(0, 0, 0, .5);
font-size: 18px;
}
.card .header-bg {
/* This stretches the canvas across the entire hero unit */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
border-bottom: 1px #FFF solid;
border-radius: 6px 6px 0 0;
}
.card .avatar {
position: relative;
margin-top: 15px;
z-index: 100;
}
.card .avatar img {
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px #FFF solid;
}
/* animation definitions */
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Raw
users.html
<template>
<section class="au-animate row">
<div class="content-fluid">
<!-- Navigation -->
<div class="panel panel-default float-left" >
<div class="panel-heading" style="background-color: ${panelColor}">
<div>
<span class="panel-title">${router.title}</span>
</div>
<div class="row">
<div><span class="col-sm-offset-1">Clicking on "Paul" then "Charlie"</span><br />
<span class="col-sm-offset-1">then "Profile" causes it reset to "Paul.</span><br />
<span class="col-sm-offset-1">I expect "Charlie".</span>
</div>
<button click.delegate="newUserClick($event)" class="btn btn-grey col-sm-offset-1 col-sm-10 m-b-10"
style="height:45px; border-radius:5; font-size: 18px;">
<span class="ion-plus fa-2x white" style="position: absolute; left:10%; top: -5%;"></span>
<span class="semi-bold" style="left: 30%; top:25%; position: absolute;"> &nbsp; New User</span>
</button>
</div>
<!-- Blade Content -->
<div>
<div class="panel-body" style="background-color: ${panelColor}">
<!-- Navigation Control -->
<ul class="nav nav-pills nav-stacked">
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a href.bind="row.href">${row.title}</a>
</li>
<li repeat.for="row of userList" class="${row.id==selecteduser.id ? 'active' : ''}">
<a click.trigger='chooseuser(row.id)'>${row.userName}</a>
</li>
</ul>
</div>
</div>
</div><!-- panel-heading -->
</div><!-- panel -->
<!-- Panel -->
<div class="panel panel-body float-left">
<router-view></router-view>
</div>
</div>
</section>
</template>
Raw
users.js
import {Configuration} from 'configuration';
import {Router, RouterConfiguration} from 'aurelia-router'
import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-framework';
import {activationStrategy} from "aurelia-router";
@inject(Configuration, EventAggregator)
export class users {
// This module
userList=[];
selecteduser;
panelColor: Number;
panelTextColor: Number;
configuration: Configuration;
title: string = "Users";
// Model
userModel = [
{
"userName": "Paul",
"id": "Paul",
"active": false
},
{
"userName": "Charlie",
"id": "Charlie",
"active": false
}
];
// Event Aggregator
eventAggregator: EventAggregator;
subscription: { dispose: () => void };
constructor(config, eventAggregator) {
console.log('setup: constructor');
this.configuration = config;
this.eventAggregator = eventAggregator;
this.userList = this.userModel;
this.selecteduser = this.userList.id;
}
configureRouter(config: RouterConfiguration, router: Router)
{
this.router = router;
console.log('setup: configureRouter');
config.map([
{ route: '', name: 'dashboard', moduleId: 'dashboard', nav: true, title: 'Dashboard' },
{ route: 'settings/:id', name: 'settings2', moduleId: 'settings', nav: false, title: 'My Settings' }
]);
}
newUserClick() {
console.log('users: Button newUserClick was clicked');
var newName = "New User " + (this.router.navigation.length - 2).toString();
var newUser = { userName: '', href: '', id: '', active: false};
newUser.userName = newName;
newUser.id = newName;
newUser.href = "#/users/settings/" + newName;
newUser.active = false;
//this.userList.push(newUser);
var newList = [newUser];
var routes = this.convertToRoutes(newList);
routes.forEach((route) => {
this.setRoute(route);
});
}
chooseuser(id) {
this.selecteduser = this.userList.find(u => u.id == id);
this.router.navigateToRoute('settings2', { id: id });
}
activate(params, route, ni) {
console.log('setup: activate, selecteduser=', params, this.selecteduser, route, ni);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment