Skip to content

Instantly share code, notes, and snippets.

@lstarky

lstarky/app.html

Forked from Vallabharayudu/app.html
Last active December 4, 2019 00:18
Show Gist options
  • Save lstarky/828c3c79bff0dfbaffec3252ed376c8c to your computer and use it in GitHub Desktop.
Save lstarky/828c3c79bff0dfbaffec3252ed376c8c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.html
<template>
<require from="styles.css"></require>
<require from="tree-view"></require>
<tree-view></tree-view>
</template>
Raw
app.js
export class App{
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<!--<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>-->
<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
node-model.js
export class NodeModel{
constructor(OrderId, OrderType, AssignedName,AssignedTime, OpenDate, Progress, children){
//this.name = name;
this.OrderId =OrderId;
this.OrderType = OrderType;
this.AssignedName = AssignedName;
this.AssignedTime = AssignedTime;
this.OpenDate = OpenDate;
this.Progress= Progress;
this.children = children || [];
this.visible = true;
if(this.hasChildren()){
this.icon = 'fa fa-minus';
this.expanded = true;
}
}
hasChildren(){
return this.children.length > 0;
}
toggleNode(){
// close other node branches
if (!this.expanded) {
var event = new CustomEvent('goCollapseAll', { 'detail': this });
window.dispatchEvent(event);
}
for(var i = 0; i < this.children.length; i++){
this.children[i].visible = !this.children[i].visible;
}
this.expanded = !this.expanded;
if(this.expanded === true){
this.icon = 'fa fa-minus';
}
else{
this.icon = 'fa fa-plus';
}
}
}
Raw
styles.css
ul{
list-style-type:none;
margin:0;
}
tree-node ul:first-child{
padding-left:0;
}
.fa.fa-plus{
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAAAmUlEQVQ4T6WTuw2AMBBDXbEDo7AQQ9AgISRYgRUYhIqK3wjsQHWEE5wOiJDCFa+xbEtxEhDRDVRjg7yNHPhC/DrMQr0QqqlD1scOCEEFXDKuKIbEASa4gEvmDeWUOn4WSNF7F/HrMAu+goPHLuLXYRZ84Qu1i/h1mAVfUHPuIn4dZsEX0pgKTEcwjfj7Gk0PyfSUTZ8p6DsTdnMcPQl3gNV4AAAAAElFTkSuQmCC);
display:inline-block;
}
.fa.fa-minus{
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0I4RDFEMDE5MDc4MTFFNjhBRkU4RjUxMTMwMTFBNDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0I4RDFEMDI5MDc4MTFFNjhBRkU4RjUxMTMwMTFBNDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQjhEMUNGRjkwNzgxMUU2OEFGRThGNTExMzAxMUE0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQjhEMUQwMDkwNzgxMUU2OEFGRThGNTExMzAxMUE0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWsFOoAAACvSURBVHjaYvz//z8DJYBx6BvAwthxZSYDI3MaWbr//53FxPDjei7D/3/HSdcM1APUywRk/mL4/CMYaNpzEmx+DtYD1MsEFXrO8Ps/0JD/vwhrBqoBqQXpAQImJKnjDH//5xI0AKIG7mUmNOlZoIDBF2hgNcjRyFC/Cl0ZGwOH1gEGRiZLzEC75gAOMyTAhMUezEBFCjR0xUw4HIsIVLRAw0hIeIILOVCPD968ABBgAN4Tav6F/rCJAAAAAElFTkSuQmCC);
display:inline-block;
}
.StartOfTreeNode > tree-node > .StartOfTreeNode{
padding-left:20px;
}
.mainBack{
background:#F7F7F7;
}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.WorkQueueDropContent{
color:#343434;
}
.EachMiniQueueWithOutCollapse{
padding:15px 10px;
border-bottom:1px solid #F1F1F1;
}
.eachMinQueueCheckSection{
margin-right:10px;
}
.leftGaptoRightElement{
margin-left:10px;
}
.lightFontForMInQueue{
color:#A8A8A8;
}
.DateOfMinQueue{
font-weight:bold;
color:#0E7EC6;
}
Raw
tree-node.html
<template>
<!-- <div class=mainBack>-->
<div show.bind="current.visible" class="StartOfTreeNode">
<div class="EachMiniQueueWithOutCollapse">
<span if.bind="current.hasChildren()" click.trigger="current.toggleNode(current)" class="${current.icon} left eachMinQueueCheckSection"></span>
<div class="left eachMinQueueCheckSection" if.bind="!current.hasChildren()">
<label class="cb_control control--checkbox">
<input type="checkbox">
<span class="control__indicator"></span>
</label>
</div>
<div class="left">
<div class="TitleOfMinQueue">
<span class="fontBold"><b>${current.OrderId}-</b></span>
<span>${current.OrderType}</span>
</div>
<div class="SummeryOfMIniQueue lightFontForMInQueue">
Assigned by: ${current.AssignedName} ${current.AssignedTime}
</div>
</div>
<div class="right leftGaptoRightElement">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplY2M1YzQzNy0xZGVlLTRjODMtOTUwMS0wODA5ZTBiNTgzOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzRGNzhCQjZBQzkzMTFFNkI1QkZBMTE4MkUyMDA1RjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzRGNzhCQjVBQzkzMTFFNkI1QkZBMTE4MkUyMDA1RjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YjM3Y2Y5ZWMtOTk1NC00MjA3LTgyNWQtZmQ2NDQwODU5OWUzIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6N2Q3MDk4ZmItZTM5Ny0xMTc5LTkzMTUtZGQ2MDVjODBiY2E3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pDpJTgAAANZJREFUeNpi/P//PwM1ABMDlQCjmZkFRQacPHkcxUXLgfgZEGsAsRUQvwfi/0Tgf+bmliC9DCxQg9yAWAiI9YFYCogFiPURVC/coEAgNgTidUDMCsRsQCxIhEEgV22nSRhRLdbyoYGcBcR8QNwPxNxEmrEZ6KpJsDBqAWIeIN4CDWx/EhwDcgncoBqoi7ZBXWRJgou2DO7AtoOmo2nQdJRLSjoCuuoQLIzWQ1P2c2hgd5DgmDQgFoZ5bTfUkEtAfAqIPxBpCMhFu5CzSASaAsEBC2yAAAMAUH07iQz8S4cAAAAASUVORK5CYII=" />
</div>
<div class="right leftGaptoRightElement">
<span class="DateOfMinQueue">${current.OpenDate}</span>
<img class="leftGaptoRightElement" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplY2M1YzQzNy0xZGVlLTRjODMtOTUwMS0wODA5ZTBiNTgzOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjNENEQ1M0RBQzkzMTFFNjlDODlFQzdDMDIwRDBFMzYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjNENEQ1M0NBQzkzMTFFNjlDODlFQzdDMDIwRDBFMzYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YjM3Y2Y5ZWMtOTk1NC00MjA3LTgyNWQtZmQ2NDQwODU5OWUzIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6N2Q3MDk4ZmItZTM5Ny0xMTc5LTkzMTUtZGQ2MDVjODBiY2E3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hjx4dAAAATtJREFUeNpiNDOzYKAEnDx5HEwzkmmQKxBPBGJZIN4GxNksZBgC0rweiLmh/DAg5mAiwyB7JENgwJ0UF4Es9QHiDCxyd4lxkQAQFwHxbSDeCHXNKiT5d+hhBPKrLxDfB+JeIJYE4jwgjgViTmi4JAHxQaj6ViBWBOIjwJh7C4u1GiBuRjL0AxDzQ22bC8RTgfgRvuiHuagAi3cmAXElEH8jNgBB4BcWuX+gdEZKTIDAdDTx90CcD8SPgbgLiOUJGYScskGB7YcU2BJQw0CBzQEN7MlAfAiqXgeaOE8Aw+k9MVkEFF6pQJwFxApAfA6aFMKRoj+YlLzGDMQBQFwOxKZocteYpaVliDXoPxBfB+LPQByCJsdHTl47DMRf0cR2kmPQUyAOBOKb0GSzBoiTWcgsz3YDsQZyygYIMACCOUVmhhs8fAAAAABJRU5ErkJggg==" />
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="clear"></div>
<!--<span>${current.name}</span>-->
</div>
<tree-node repeat.for="node of current.children" current.bind="node"></tree-node>
</div>
<!-- </div>-->
</template>
Raw
tree-node.js
import {Behavior} from 'aurelia-framework';
import {bindable} from 'aurelia-framework';
export class TreeNode {
@bindable current = null;
}
Raw
tree-view.html
<template>
<require from='./tree-node'></require>
<tree-node repeat.for="node of nodes" current.bind="node"></tree-node>
</template>
Raw
tree-view.js
import {Behavior} from 'aurelia-framework';
import {NodeModel} from 'node-model';
export class TreeView {
constructor(){
var texas = new NodeModel('Vallabha','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing',
[new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing')]);
var newYork = new NodeModel('Lstarcky','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing',[
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing', [new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing',
[new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing')]),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing')]),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing')]);
var oregon = new NodeModel('Vallabha 2','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'
,[new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing')]);
var california = new NodeModel('Lstarcky 2','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing',
[new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','Pendiing')]);
this.nodes = [texas,newYork,oregon,california];
}
attached() {
window.addEventListener('goCollapseAll', (e) => {
this.closeOtherBranches(e.detail);
}, false);
}
closeOtherBranches(exceptNode) {
// traverse node tree to find current one
var found = null;
for(var i = 0; i < this.nodes.length; i++){
if (this.subSearch(this.nodes[i], exceptNode)) {
found = i;
}
}
if (found !== null) {
for(var i = 0; i < this.nodes.length; i++){
if ((i != found) && (this.nodes[i].expanded)) {
this.nodes[i].toggleNode();
}
}
}
}
subSearch(node, findNode) {
// recursive search of tree for findNode
var match = null;
if (node === findNode) {
match = node;
} else {
for(var i = 0; i < node.children.length; i++){
if (node.children[i] === findNode) {
match = node;
} else {
match = this.subSearch(node.children[i], findNode);
}
}
}
return match;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment