mwdchang/index.html

## index.html
<!DOCTYPE html>
<html data-ng-app="Test">
<head>
<title>Test Modeller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link href="https://dcc.icgc.org/styles/18e3f501.styles.css" rel="stylesheet" type="text/css"></link>
<link href="https://dcc.icgc.org/styles/54e20491.vendor.css" rel="stylesheet" type="text/css"></link>
</head>
<body>

<div class="light ng-cloak" ng-controller="MyController">
<section>
    <div class="pull-left">
        <strong>Table Modeller (Format: name [,expected_size] )</strong><br>
        <textarea style="width:40rem; height:8rem" ng-model="tableStr" ng-change="refresh()"></textarea>
    </div>
    <div class="pull-right">
        <strong>?????</strong><br>
       some other things can go here
    </div>
    <div class="clearfix"></div>
</section>
<hr>
<header>
    <h1 id="brand"> ICGC Data Portal<h1>
</header>
<div class="h1-wrap">
    <h1><i class="icon-caret-right"></i>Page Title Goes In Here</h1>
</div>
<aside class="t_aside">
    <div style="margin-right:-2rem">
    <ul class="t_facets__facet" ng-repeat="x in [1, 2]">
        <li class="t_facets__facet__title">Facet Title</li>
        <li class="t_facets__facet__terms">
            <ul class="t_facets__facet">
                <ul class="t_facets__facet__terms__active">
                    <li class="t_facets__facet__terms__active__term__label">Term 1</li>
                    <li class="t_facets__facet__terms__active__term__label">Term 2</li>
                    <li class="t_facets__facet__terms__active__term__label">Term 3</li>
                    <li class="t_facets__facet__terms__active__term__label">Term 4</li>
                </ul>
            </ul>
        </li>
    </ul>
    </div>
</aside>
<article>
    <section>
        <span>Showing <strong>X</strong> of <strong> Y </strong> things</span>
        <table class="table table-info">
           <thead>
               <th ng-repeat="c in columnList">{{c.name}}</th>
           </thead>
           <tbody>
               <tr>
                   <td ng-repeat="c in columnList">{{c.len | expand }}</td>
               </tr>
               <tr>
                   <td ng-repeat="c in columnList">{{c.len | expand }}</td>
               </tr>
               <tr>
                   <td ng-repeat="c in columnList">{{c.len | expand }}</td>
               </tr>
               <tr>
                   <td ng-repeat="c in columnList">{{c.len | expand }}</td>
               </tr>
               <tr>
                   <td ng-repeat="c in columnList">{{c.len | expand }}</td>
               </tr>
           </tbody>
        </table>
        <small>So my darling don't give up. On these dreams you're dreaming of, When the sky falls down one day. It's your dance that will remain. </small>
    </section>
</article>
</div>

</body>
<script>

var app = angular.module("Test", []);

app.filter('expand', function() {
  return function(len) {
    return (new Array(+len)).join('?');
  };
});

app.controller('MyController', function($scope) {
   $scope.tableStr = 'column1,8\ncolumn2\ncolumn3,2';

   $scope.refresh = function() {
     var cols = $scope.tableStr.split('\n');

     $scope.columnList = cols.map(function(s) {
       return {
         name: s.split(',')[0],
         len: 1 + (+s.split(',')[1]) || 4
       };
     });
   }

   $scope.refresh();
});

</script>
</html>
	<!DOCTYPE html>
	<html data-ng-app="Test">
	<head>
	<title>Test Modeller</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<link href="https://dcc.icgc.org/styles/18e3f501.styles.css" rel="stylesheet" type="text/css"></link>
	<link href="https://dcc.icgc.org/styles/54e20491.vendor.css" rel="stylesheet" type="text/css"></link>
	</head>
	<body>

	<div class="light ng-cloak" ng-controller="MyController">
	<section>
	<div class="pull-left">
	<strong>Table Modeller (Format: name [,expected_size] )</strong><br>
	<textarea style="width:40rem; height:8rem" ng-model="tableStr" ng-change="refresh()"></textarea>
	</div>
	<div class="pull-right">
	<strong>?????</strong><br>
	some other things can go here
	</div>
	<div class="clearfix"></div>
	</section>
	<hr>
	<header>
	<h1 id="brand"> ICGC Data Portal<h1>
	</header>
	<div class="h1-wrap">
	<h1><i class="icon-caret-right"></i>Page Title Goes In Here</h1>
	</div>
	<aside class="t_aside">
	<div style="margin-right:-2rem">
	<ul class="t_facets__facet" ng-repeat="x in [1, 2]">
	<li class="t_facets__facet__title">Facet Title</li>
	<li class="t_facets__facet__terms">
	<ul class="t_facets__facet">
	<ul class="t_facets__facet__terms__active">
	<li class="t_facets__facet__terms__active__term__label">Term 1</li>
	<li class="t_facets__facet__terms__active__term__label">Term 2</li>
	<li class="t_facets__facet__terms__active__term__label">Term 3</li>
	<li class="t_facets__facet__terms__active__term__label">Term 4</li>
	</ul>
	</ul>
	</li>
	</ul>
	</div>
	</aside>
	<article>
	<section>
	<span>Showing <strong>X</strong> of <strong> Y </strong> things</span>
	<table class="table table-info">
	<thead>
	<th ng-repeat="c in columnList">{{c.name}}</th>
	</thead>
	<tbody>
	<tr>
	<td ng-repeat="c in columnList">{{c.len \| expand }}</td>
	</tr>
	<tr>
	<td ng-repeat="c in columnList">{{c.len \| expand }}</td>
	</tr>
	<tr>
	<td ng-repeat="c in columnList">{{c.len \| expand }}</td>
	</tr>
	<tr>
	<td ng-repeat="c in columnList">{{c.len \| expand }}</td>
	</tr>
	<tr>
	<td ng-repeat="c in columnList">{{c.len \| expand }}</td>
	</tr>
	</tbody>
	</table>
	<small>So my darling don't give up. On these dreams you're dreaming of, When the sky falls down one day. It's your dance that will remain. </small>
	</section>
	</article>
	</div>

	</body>
	<script>

	var app = angular.module("Test", []);

	app.filter('expand', function() {
	return function(len) {
	return (new Array(+len)).join('?');
	};
	});

	app.controller('MyController', function($scope) {
	$scope.tableStr = 'column1,8\ncolumn2\ncolumn3,2';

	$scope.refresh = function() {
	var cols = $scope.tableStr.split('\n');

	$scope.columnList = cols.map(function(s) {
	return {
	name: s.split(',')[0],
	len: 1 + (+s.split(',')[1]) \|\| 4
	};
	});
	}

	$scope.refresh();
	});

	</script>
	</html>