diff --git a/app/app.js b/app/app.js
new file mode 100644
index 0000000000..d0375c3425
--- /dev/null
+++ b/app/app.js
@@ -0,0 +1,53 @@
+var express = require('express'),htmlApp = express();
+var app = express();
+
+app.get('/test', function(req, res) {
+    res.type('text/plain');
+    res.send('i am a beautiful butterfly');
+});
+
+app.get('/path', function(req, res) {
+    res.type('text/plain');
+    res.send(__dirname);
+});
+
+app.get('/trans',function(req, res) {
+    //Example POST method invocation
+    var Client = require('node-rest-client').Client;
+
+    var client = new Client();
+
+    var args = {
+        data: {
+            "BoolValue":true,
+            "StringValue":"String content"
+        },
+        headers:{"Content-Type": "application/json"}
+    };
+
+    //client.post("http://192.168.58.106/webapplication2/testCompositeType", args, function(data,response) {
+        // parsed response body as js object
+        //console.log(data);
+        // raw response
+        //console.log(response);
+    //});
+
+    // registering remote methods
+    client.registerMethod("postMethod", "http://work/webapplication2/testCompositeType", "POST");
+
+    client.methods.postMethod(args, function(data,response){
+        // parsed response body as js object
+        console.log(data);
+        // raw response
+        console.log(response);
+
+        res.type('text/plain');
+        res.send(data);
+    });
+});
+
+htmlApp.use(express.static(__dirname));
+
+app.listen(process.env.PORT || 4730);
+
+htmlApp.listen(8000);//, '127.0.0.1');
diff --git a/app/data/pilo1.json b/app/data/pilo1.json
new file mode 100644
index 0000000000..826669a5dd
--- /dev/null
+++ b/app/data/pilo1.json
@@ -0,0 +1,562 @@
+[
+  {
+    "row": 1,
+    "col": 1,
+    "number": "1011",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 1,
+    "col": 2,
+    "number": "1012",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 2,
+    "col": 1,
+    "number": "1021",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 2,
+    "col": 2,
+    "number": "1022",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 3,
+    "col": 1,
+    "number": "1031",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 3,
+    "col": 2,
+    "number": "1032",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 4,
+    "col": 1,
+    "number": "1041",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 4,
+    "col": 2,
+    "number": "1042",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 5,
+    "col": 1,
+    "number": "1051",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 5,
+    "col": 2,
+    "number": "1052",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 6,
+    "col": 1,
+    "number": "1061",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 6,
+    "col": 2,
+    "number": "1062",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 7,
+    "col": 1,
+    "number": "1071",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 7,
+    "col": 2,
+    "number": "1071",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 8,
+    "col": 1,
+    "number": "1081",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 8,
+    "col": 2,
+    "number": "1082",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 9,
+    "col": 1,
+    "number": "1091",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 9,
+    "col": 2,
+    "number": "1092",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 10,
+    "col": 1,
+    "number": "1101",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 10,
+    "col": 2,
+    "number": "1102",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 11,
+    "col": 1,
+    "number": "1111",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 11,
+    "col": 2,
+    "number": "1112",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 12,
+    "col": 1,
+    "number": "1121",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 12,
+    "col": 2,
+    "number": "1122",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 13,
+    "col": 1,
+    "number": "1131",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 13,
+    "col": 2,
+    "number": "1132",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 14,
+    "col": 1,
+    "number": "1141",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 14,
+    "col": 2,
+    "number": "1142",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 15,
+    "col": 1,
+    "number": "1151",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 15,
+    "col": 2,
+    "number": "1152",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 16,
+    "col": 1,
+    "number": "1161",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 16,
+    "col": 2,
+    "number": "1162",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 17,
+    "col": 1,
+    "number": "1171",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 17,
+    "col": 2,
+    "number": "1172",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 18,
+    "col": 1,
+    "number": "1181",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 18,
+    "col": 2,
+    "number": "1182",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 19,
+    "col": 1,
+    "number": "1191",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 19,
+    "col": 2,
+    "number": "1192",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 20,
+    "col": 1,
+    "number": "1201",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 20,
+    "col": 2,
+    "number": "1202",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 21,
+    "col": 1,
+    "number": "1211",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 21,
+    "col": 2,
+    "number": "1212",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 22,
+    "col": 1,
+    "number": "1221",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 22,
+    "col": 2,
+    "number": "1222",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 23,
+    "col": 1,
+    "number": "1231",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 23,
+    "col": 2,
+    "number": "1232",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 24,
+    "col": 1,
+    "number": "1241",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 24,
+    "col": 2,
+    "number": "1242",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 25,
+    "col": 1,
+    "number": "1251",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 25,
+    "col": 2,
+    "number": "1252",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 26,
+    "col": 1,
+    "number": "1261",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 26,
+    "col": 2,
+    "number": "1262",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 27,
+    "col": 1,
+    "number": "1271",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 27,
+    "col": 2,
+    "number": "1272",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 28,
+    "col": 1,
+    "number": "1281",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 28,
+    "col": 2,
+    "number": "1282",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 29,
+    "col": 1,
+    "number": "1291",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 29,
+    "col": 2,
+    "number": "1292",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 30,
+    "col": 1,
+    "number": "1301",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 30,
+    "col": 2,
+    "number": "1302",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 31,
+    "col": 1,
+    "number": "1311",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 31,
+    "col": 2,
+    "number": "1312",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 32,
+    "col": 1,
+    "number": "1321",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 32,
+    "col": 2,
+    "number": "1322",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 33,
+    "col": 1,
+    "number": "1331",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 33,
+    "col": 2,
+    "number": "1332",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 34,
+    "col": 1,
+    "number": "1341",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 34,
+    "col": 2,
+    "number": "1342",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 35,
+    "col": 1,
+    "number": "1351",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 35,
+    "col": 2,
+    "number": "1352",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 36,
+    "col": 1,
+    "number": "1361",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 36,
+    "col": 2,
+    "number": "1362",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 37,
+    "col": 1,
+    "number": "1371",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 37,
+    "col": 2,
+    "number": "1372",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 38,
+    "col": 1,
+    "number": "1381",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 38,
+    "col": 2,
+    "number": "1382",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 39,
+    "col": 1,
+    "number": "1391",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 39,
+    "col": 2,
+    "number": "1392",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 40,
+    "col": 1,
+    "number": "1401",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 40,
+    "col": 2,
+    "number": "1402",
+    "num": 10,
+    "state": 0
+  }
+]
diff --git a/app/data/pilo2.json b/app/data/pilo2.json
new file mode 100644
index 0000000000..52983578ee
--- /dev/null
+++ b/app/data/pilo2.json
@@ -0,0 +1,562 @@
+[
+  {
+    "row": 1,
+    "col": 1,
+    "number": "2011",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 1,
+    "col": 2,
+    "number": "2012",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 2,
+    "col": 1,
+    "number": "2021",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 2,
+    "col": 2,
+    "number": "2022",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 3,
+    "col": 1,
+    "number": "2031",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 3,
+    "col": 2,
+    "number": "2032",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 4,
+    "col": 1,
+    "number": "2041",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 4,
+    "col": 2,
+    "number": "2042",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 5,
+    "col": 1,
+    "number": "2051",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 5,
+    "col": 2,
+    "number": "2052",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 6,
+    "col": 1,
+    "number": "2061",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 6,
+    "col": 2,
+    "number": "2062",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 7,
+    "col": 1,
+    "number": "2071",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 7,
+    "col": 2,
+    "number": "2071",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 8,
+    "col": 1,
+    "number": "2081",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 8,
+    "col": 2,
+    "number": "2082",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 9,
+    "col": 1,
+    "number": "2091",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 9,
+    "col": 2,
+    "number": "2092",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 10,
+    "col": 1,
+    "number": "2101",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 10,
+    "col": 2,
+    "number": "2102",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 11,
+    "col": 1,
+    "number": "2111",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 11,
+    "col": 2,
+    "number": "2112",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 12,
+    "col": 1,
+    "number": "2121",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 12,
+    "col": 2,
+    "number": "2122",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 13,
+    "col": 1,
+    "number": "2131",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 13,
+    "col": 2,
+    "number": "2132",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 14,
+    "col": 1,
+    "number": "2141",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 14,
+    "col": 2,
+    "number": "2142",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 15,
+    "col": 1,
+    "number": "2151",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 15,
+    "col": 2,
+    "number": "2152",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 16,
+    "col": 1,
+    "number": "2161",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 16,
+    "col": 2,
+    "number": "2162",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 17,
+    "col": 1,
+    "number": "2171",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 17,
+    "col": 2,
+    "number": "2172",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 18,
+    "col": 1,
+    "number": "2181",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 18,
+    "col": 2,
+    "number": "2182",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 19,
+    "col": 1,
+    "number": "2191",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 19,
+    "col": 2,
+    "number": "2192",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 20,
+    "col": 1,
+    "number": "2201",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 20,
+    "col": 2,
+    "number": "2202",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 21,
+    "col": 1,
+    "number": "2211",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 21,
+    "col": 2,
+    "number": "2212",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 22,
+    "col": 1,
+    "number": "2221",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 22,
+    "col": 2,
+    "number": "2222",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 23,
+    "col": 1,
+    "number": "2231",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 23,
+    "col": 2,
+    "number": "2232",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 24,
+    "col": 1,
+    "number": "2241",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 24,
+    "col": 2,
+    "number": "2242",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 25,
+    "col": 1,
+    "number": "2251",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 25,
+    "col": 2,
+    "number": "2252",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 26,
+    "col": 1,
+    "number": "2261",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 26,
+    "col": 2,
+    "number": "2262",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 27,
+    "col": 1,
+    "number": "2271",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 27,
+    "col": 2,
+    "number": "2272",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 28,
+    "col": 1,
+    "number": "2281",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 28,
+    "col": 2,
+    "number": "2282",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 29,
+    "col": 1,
+    "number": "2291",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 29,
+    "col": 2,
+    "number": "2292",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 30,
+    "col": 1,
+    "number": "2301",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 30,
+    "col": 2,
+    "number": "2302",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 31,
+    "col": 1,
+    "number": "2311",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 31,
+    "col": 2,
+    "number": "2312",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 32,
+    "col": 1,
+    "number": "2321",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 32,
+    "col": 2,
+    "number": "2322",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 33,
+    "col": 1,
+    "number": "2331",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 33,
+    "col": 2,
+    "number": "2332",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 34,
+    "col": 1,
+    "number": "2341",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 34,
+    "col": 2,
+    "number": "2342",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 35,
+    "col": 1,
+    "number": "2351",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 35,
+    "col": 2,
+    "number": "2352",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 36,
+    "col": 1,
+    "number": "2361",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 36,
+    "col": 2,
+    "number": "2362",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 37,
+    "col": 1,
+    "number": "2371",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 37,
+    "col": 2,
+    "number": "2372",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 38,
+    "col": 1,
+    "number": "2381",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 38,
+    "col": 2,
+    "number": "2382",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 39,
+    "col": 1,
+    "number": "2391",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 39,
+    "col": 2,
+    "number": "2392",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 40,
+    "col": 1,
+    "number": "2401",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 40,
+    "col": 2,
+    "number": "2402",
+    "num": 10,
+    "state": 0
+  }
+]
diff --git a/app/data/pilo3.json b/app/data/pilo3.json
new file mode 100644
index 0000000000..237e9c940c
--- /dev/null
+++ b/app/data/pilo3.json
@@ -0,0 +1,562 @@
+[
+  {
+    "row": 1,
+    "col": 1,
+    "number": "3011",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 1,
+    "col": 2,
+    "number": "3012",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 2,
+    "col": 1,
+    "number": "3021",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 2,
+    "col": 2,
+    "number": "3022",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 3,
+    "col": 1,
+    "number": "3031",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 3,
+    "col": 2,
+    "number": "3032",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 4,
+    "col": 1,
+    "number": "3041",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 4,
+    "col": 2,
+    "number": "3042",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 5,
+    "col": 1,
+    "number": "3051",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 5,
+    "col": 2,
+    "number": "3052",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 6,
+    "col": 1,
+    "number": "3061",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 6,
+    "col": 2,
+    "number": "3062",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 7,
+    "col": 1,
+    "number": "3071",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 7,
+    "col": 2,
+    "number": "3071",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 8,
+    "col": 1,
+    "number": "3081",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 8,
+    "col": 2,
+    "number": "3082",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 9,
+    "col": 1,
+    "number": "3091",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 9,
+    "col": 2,
+    "number": "3092",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 10,
+    "col": 1,
+    "number": "3101",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 10,
+    "col": 2,
+    "number": "3102",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 11,
+    "col": 1,
+    "number": "3111",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 11,
+    "col": 2,
+    "number": "3112",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 12,
+    "col": 1,
+    "number": "3121",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 12,
+    "col": 2,
+    "number": "3122",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 13,
+    "col": 1,
+    "number": "3131",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 13,
+    "col": 2,
+    "number": "3132",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 14,
+    "col": 1,
+    "number": "3141",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 14,
+    "col": 2,
+    "number": "3142",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 15,
+    "col": 1,
+    "number": "3151",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 15,
+    "col": 2,
+    "number": "3152",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 16,
+    "col": 1,
+    "number": "3161",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 16,
+    "col": 2,
+    "number": "3162",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 17,
+    "col": 1,
+    "number": "3171",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 17,
+    "col": 2,
+    "number": "3172",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 18,
+    "col": 1,
+    "number": "3181",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 18,
+    "col": 2,
+    "number": "3182",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 19,
+    "col": 1,
+    "number": "3191",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 19,
+    "col": 2,
+    "number": "3192",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 20,
+    "col": 1,
+    "number": "3201",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 20,
+    "col": 2,
+    "number": "3202",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 21,
+    "col": 1,
+    "number": "3211",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 21,
+    "col": 2,
+    "number": "3212",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 22,
+    "col": 1,
+    "number": "3221",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 22,
+    "col": 2,
+    "number": "3222",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 23,
+    "col": 1,
+    "number": "3231",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 23,
+    "col": 2,
+    "number": "3232",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 24,
+    "col": 1,
+    "number": "3241",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 24,
+    "col": 2,
+    "number": "3242",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 25,
+    "col": 1,
+    "number": "3251",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 25,
+    "col": 2,
+    "number": "3252",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 26,
+    "col": 1,
+    "number": "3261",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 26,
+    "col": 2,
+    "number": "3262",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 27,
+    "col": 1,
+    "number": "3271",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 27,
+    "col": 2,
+    "number": "3272",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 28,
+    "col": 1,
+    "number": "3281",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 28,
+    "col": 2,
+    "number": "3282",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 29,
+    "col": 1,
+    "number": "3291",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 29,
+    "col": 2,
+    "number": "3292",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 30,
+    "col": 1,
+    "number": "3301",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 30,
+    "col": 2,
+    "number": "3302",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 31,
+    "col": 1,
+    "number": "3311",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 31,
+    "col": 2,
+    "number": "3312",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 32,
+    "col": 1,
+    "number": "3321",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 32,
+    "col": 2,
+    "number": "3322",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 33,
+    "col": 1,
+    "number": "3331",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 33,
+    "col": 2,
+    "number": "3332",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 34,
+    "col": 1,
+    "number": "3341",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 34,
+    "col": 2,
+    "number": "3342",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 35,
+    "col": 1,
+    "number": "3351",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 35,
+    "col": 2,
+    "number": "3352",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 36,
+    "col": 1,
+    "number": "3361",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 36,
+    "col": 2,
+    "number": "3362",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 37,
+    "col": 1,
+    "number": "3371",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 37,
+    "col": 2,
+    "number": "3372",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 38,
+    "col": 1,
+    "number": "3381",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 38,
+    "col": 2,
+    "number": "3382",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 39,
+    "col": 1,
+    "number": "3391",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 39,
+    "col": 2,
+    "number": "3392",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 40,
+    "col": 1,
+    "number": "3401",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 40,
+    "col": 2,
+    "number": "3402",
+    "num": 10,
+    "state": 0
+  }
+]
diff --git a/app/data/pilo4.json b/app/data/pilo4.json
new file mode 100644
index 0000000000..3ed2cfad4c
--- /dev/null
+++ b/app/data/pilo4.json
@@ -0,0 +1,562 @@
+[
+  {
+    "row": 1,
+    "col": 1,
+    "number": "4011",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 1,
+    "col": 2,
+    "number": "4012",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 2,
+    "col": 1,
+    "number": "4021",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 2,
+    "col": 2,
+    "number": "4022",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 3,
+    "col": 1,
+    "number": "4031",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 3,
+    "col": 2,
+    "number": "4032",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 4,
+    "col": 1,
+    "number": "4041",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 4,
+    "col": 2,
+    "number": "4042",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 5,
+    "col": 1,
+    "number": "4051",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 5,
+    "col": 2,
+    "number": "4052",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 6,
+    "col": 1,
+    "number": "4061",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 6,
+    "col": 2,
+    "number": "4062",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 7,
+    "col": 1,
+    "number": "4071",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 7,
+    "col": 2,
+    "number": "4071",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 8,
+    "col": 1,
+    "number": "4081",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 8,
+    "col": 2,
+    "number": "4082",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 9,
+    "col": 1,
+    "number": "4091",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 9,
+    "col": 2,
+    "number": "4092",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 10,
+    "col": 1,
+    "number": "4101",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 10,
+    "col": 2,
+    "number": "4102",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 11,
+    "col": 1,
+    "number": "4111",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 11,
+    "col": 2,
+    "number": "4112",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 12,
+    "col": 1,
+    "number": "4121",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 12,
+    "col": 2,
+    "number": "4122",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 13,
+    "col": 1,
+    "number": "4131",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 13,
+    "col": 2,
+    "number": "4132",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 14,
+    "col": 1,
+    "number": "4141",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 14,
+    "col": 2,
+    "number": "4142",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 15,
+    "col": 1,
+    "number": "4151",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 15,
+    "col": 2,
+    "number": "4152",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 16,
+    "col": 1,
+    "number": "4161",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 16,
+    "col": 2,
+    "number": "4162",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 17,
+    "col": 1,
+    "number": "4171",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 17,
+    "col": 2,
+    "number": "4172",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 18,
+    "col": 1,
+    "number": "4181",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 18,
+    "col": 2,
+    "number": "4182",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 19,
+    "col": 1,
+    "number": "4191",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 19,
+    "col": 2,
+    "number": "4192",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 20,
+    "col": 1,
+    "number": "4201",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 20,
+    "col": 2,
+    "number": "4202",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 21,
+    "col": 1,
+    "number": "4211",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 21,
+    "col": 2,
+    "number": "4212",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 22,
+    "col": 1,
+    "number": "4221",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 22,
+    "col": 2,
+    "number": "4222",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 23,
+    "col": 1,
+    "number": "4231",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 23,
+    "col": 2,
+    "number": "4232",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 24,
+    "col": 1,
+    "number": "4241",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 24,
+    "col": 2,
+    "number": "4242",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 25,
+    "col": 1,
+    "number": "4251",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 25,
+    "col": 2,
+    "number": "4252",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 26,
+    "col": 1,
+    "number": "4261",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 26,
+    "col": 2,
+    "number": "4262",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 27,
+    "col": 1,
+    "number": "4271",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 27,
+    "col": 2,
+    "number": "4272",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 28,
+    "col": 1,
+    "number": "4281",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 28,
+    "col": 2,
+    "number": "4282",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 29,
+    "col": 1,
+    "number": "4291",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 29,
+    "col": 2,
+    "number": "4292",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 30,
+    "col": 1,
+    "number": "4301",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 30,
+    "col": 2,
+    "number": "4302",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 31,
+    "col": 1,
+    "number": "4311",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 31,
+    "col": 2,
+    "number": "4312",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 32,
+    "col": 1,
+    "number": "4321",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 32,
+    "col": 2,
+    "number": "4322",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 33,
+    "col": 1,
+    "number": "4331",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 33,
+    "col": 2,
+    "number": "4332",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 34,
+    "col": 1,
+    "number": "4341",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 34,
+    "col": 2,
+    "number": "4342",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 35,
+    "col": 1,
+    "number": "4351",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 35,
+    "col": 2,
+    "number": "4352",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 36,
+    "col": 1,
+    "number": "4361",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 36,
+    "col": 2,
+    "number": "4362",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 37,
+    "col": 1,
+    "number": "4371",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 37,
+    "col": 2,
+    "number": "4372",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 38,
+    "col": 1,
+    "number": "4381",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 38,
+    "col": 2,
+    "number": "4382",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 39,
+    "col": 1,
+    "number": "4391",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 39,
+    "col": 2,
+    "number": "4392",
+    "num": 10,
+    "state": 0
+  },
+  {
+    "row": 40,
+    "col": 1,
+    "number": "4401",
+    "num": 10,
+    "state": 1
+  },
+  {
+    "row": 40,
+    "col": 2,
+    "number": "4402",
+    "num": 10,
+    "state": 0
+  }
+]
diff --git a/app/data/store1.json b/app/data/store1.json
new file mode 100644
index 0000000000..e87d1e02af
--- /dev/null
+++ b/app/data/store1.json
@@ -0,0 +1,191 @@
+[
+  {
+    "SLAB_NO": "S21501210451",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 1,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210452",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 2,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210453",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 3,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210454",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 4,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210455",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 5,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210456",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 6,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210457",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 7,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210458",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 8,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  },
+  {
+    "SLAB_NO": "S21501210459",
+    "STEEL_GRADE": "Q345GJC-Z15",
+    "SLAB_THICK": 300,
+    "SLAB_WIDTH": 1810,
+    "SLAB_LENGTH": 2840,
+    "SLAB_WEIGHT": 11982,
+    "PILE_NO": "H1022",
+    "TIER_NO": 9,
+    "COIL_NO": "",
+    "ST_NO": "",
+    "SLAB_STATUS": "000",
+    "SLAB_ATTRIBUTE": "00000000",
+    "HCR_FLAG": 0,
+    "HEAT_NO": "",
+    "YC_FLAG": 0,
+    "ORDER_NO": "",
+    "ACT_WEIGHT": 0,
+    "YARD_NO": "",
+    "PLANT_NO": 1
+  }
+]
diff --git a/app/data/up.json b/app/data/up.json
new file mode 100644
index 0000000000..219583450e
--- /dev/null
+++ b/app/data/up.json
@@ -0,0 +1,4 @@
+{
+  "res": "true",
+  "resf": "false"
+}
diff --git a/app/index.html b/app/index.html
index d22be8b305..4f55fa3e19 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1,42 +1,57 @@
 <!DOCTYPE html>
-<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>My AngularJS App</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="../bower_components/html5-boilerplate/css/normalize.css">
-  <link rel="stylesheet" href="../bower_components/html5-boilerplate/css/main.css">
-  <link rel="stylesheet" href="css/app.css"/>
-  <script src="../bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
-</head>
-<body>
-  <ul class="menu">
-    <li><a href="#/view1">view1</a></li>
-    <li><a href="#/view2">view2</a></li>
-  </ul>
-
-  <!--[if lt IE 7]>
-      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-  <![endif]-->
-
-  <div ng-view></div>
-
-  <div>Angular seed app: v<span app-version></span></div>
-
-  <!-- In production use:
-  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-  -->
-  <script src="bower_components/angular/angular.js"></script>
-  <script src="bower_components/angular-route/angular-route.js"></script>
-  <script src="js/app.js"></script>
-  <script src="js/services.js"></script>
-  <script src="js/controllers.js"></script>
-  <script src="js/filters.js"></script>
-  <script src="js/directives.js"></script>
-</body>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+        <meta name="description" content="">
+        <meta name="author" content="">
+        <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
+
+        <title>MASIC仓库管理系统</title>
+        <link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css">
+        <!-- Bootstrap core CSS -->
+        <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+
+        <!-- Custom styles for this template -->
+        <!-- <link href="jumbotron.css" rel="stylesheet"> -->
+
+        <!-- Just for debugging purposes. Don't actually copy this line! -->
+        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
+        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+        <!--[if lt IE 9]>
+<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+<![endif]-->
+    </head>
+
+    <body ng-app="myApp">
+
+        <div ui-view></div>
+
+        <!-- In production use:
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
+-->
+        <script src="bower_components/jquery/dist/jquery.min.js"></script>
+        <script src="bower_components/jqueryui/ui/jquery-ui.js"></script>
+        <script src="bower_components/angular/angular.js"></script>
+        <script src="bower_components/ui-sortable/index.js"></script>
+        <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
+        <script src='bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js'></script>
+        <script src="bower_components/jsencrypt/bin/jsencrypt.min.js"></script>
+        <script src="js/app.js"></script>
+        <script src="js/services.js"></script>
+        <script src="js/controllers.js"></script>
+        <script src="js/filters.js"></script>
+        <script src="js/directives.js"></script>
+        <script src="js/dataService.js"></script>
+        <!-- Bootstrap core JavaScript================================================== -->
+        <!-- Placed at the end of the document so the pages load faster -->
+        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+        <script src="bower_components/bootstrap/js/tooltip.js"></script>
+        <script src="bower_components/bootstrap/js/popover.js"></script>
+
+        <script src="bower_components/angular-ui-tree/dist/angular-ui-tree.min.js"></script>
+    </body>
 </html>
diff --git a/app/js/app.js b/app/js/app.js
index d990ec7c9d..7a9d559004 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -2,15 +2,61 @@
 
 
 // Declare app level module which depends on filters, and services
+
 angular.module('myApp', [
-  'ngRoute',
   'myApp.filters',
   'myApp.services',
   'myApp.directives',
-  'myApp.controllers'
+  'myApp.controllers',
+  'ui.router',
+  'ui.sortable',
+  'ui.tree',
+  'infinite-scroll',
+  'dataServices'
 ]).
-config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
-  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
-  $routeProvider.otherwise({redirectTo: '/view1'});
-}]);
+config(['$stateProvider', '$urlRouterProvider',
+        function($stateProvider, $urlRouterProvider) {
+          //$urlRouterProvider.when('/loginPage', {templateUrl: 'partials/loginPage.html', controller: 'loginCtrl'});
+          //$urlRouterProvider.when('/funcPage/:name/:password', {templateUrl: 'partials/funcPage.html', controller: 'funcCtrl'});
+          //$urlRouterProvider.when('/storageViewPage', {templateUrl: 'partials/storageViewPage.html', controller: 'storageViewCtrl'});
+          //$urlRouterProvider.when('/storeViewPage/:storeno', {templateUrl: 'partials/storeViewPage.html', controller: 'storeViewCtrl'});
+          //$urlRouterProvider.otherwise({redirectTo: '/loginPage'});
+
+          // For any unmatched url, redirect to /state1
+          $urlRouterProvider.otherwise("/loginPage");
+
+          //
+          // Now set up the states
+          $stateProvider
+          .state('login', {
+            url: "/loginPage",
+            templateUrl: "partials/loginPage.html",
+            controller: 'loginCtrl'
+          }).
+          state('navTemplate', {
+            url: "/navTemplate",
+            templateUrl: "partials/navTemplate.html",
+            controller: ''//'funcCtrl'
+          }).
+          state('navTemplate.func', {
+            url: "/funcPage",
+            templateUrl: "partials/funcPage.html",
+            controller: 'funcCtrl'
+          }).
+          state('navTemplate.storageView', {
+            url: "/storageViewPage",
+            templateUrl: "partials/storageViewPage.html",
+            controller: 'storageViewCtrl'
+          }).
+          state('navTemplate.storeView', {
+            url: "/storeViewPage/:storeno",
+            templateUrl: "partials/storeViewPage.html",
+            controller: 'storeViewCtrl'
+          });
+        }]).
+directive('popover', function() {
+  return function(scope, elem) {
+    elem.popover();
+  }
+});
+
diff --git a/app/js/controllers.js b/app/js/controllers.js
index 6ec39e1235..0722f22ffe 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -2,10 +2,336 @@
 
 /* Controllers */
 
-angular.module('myApp.controllers', [])
-  .controller('MyCtrl1', ['$scope', function($scope) {
+angular.module('myApp.controllers', []).directive('popover', function() {
+  return function(scope, elem) {
+    elem.popover();
+  }
+})
+.controller('loginCtrl', ['$scope','data',
+                          function($scope, data) {
+                            $scope.name = '';
+                            $scope.password = '';
+                            $scope.setPassword = function(){
+                              data.password = $scope.password;
+                              data.name = $scope.name;
+                            }
 
-  }])
-  .controller('MyCtrl2', ['$scope', function($scope) {
+                          }])
+.controller('funcCtrl', ['$scope', '$state', '$http','data',
+                         function($scope, $state, $http, data) {
+                           $scope.name = data.name;
+                           //$rootScope.password = data.password;
+                           var encrypt = new JSEncrypt();
+                           encrypt.setPublicKey(
+                             "-----BEGIN PUBLIC KEY-----" +
+                             "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC51FzMSexieGcfr2NJFT5QKcEz" +
+                             "gzpH5PIbe4NwZOc0pMD1Ez9vI69rUPes4jVdbYIragj7bk3xKMhwZ9m5bVm7Lnov" +
+                             "sBqjDO2Cm6vQyAw6jvHf3QjiM9j7io9JjVE/pNgZaECZhpN7XT8BPvM2C7w2Lftj" +
+                             "S6zKOEjpdLQADVW2BwIDAQAB" +
+                             "-----END PUBLIC KEY-----"
+                           );
+                           console.log(encrypt);
 
-  }]);
+                           var encrypted = encrypt.encrypt(data.password);
+
+                           $http.post('http://win8dev/SycWeb/Login?userid=' + data.name,
+                                                 JSON.stringify(encrypted),
+                                                 {timeout: 1500}).
+                           success(function(data) {
+                             if(data.Status == false){
+                               //$state.go("login");
+                             }
+                           }).
+                           error(function(data,status){
+                             //$state.go("login");
+                           });
+
+                         }])
+.controller('storageViewCtrl', ['$scope', '$stateParams','$http',
+                                function($scope, $stateParams, $http) {
+                                  $scope.storageNum = [1,2,3,4];
+                                  //$scope.scrollFlag = false;
+                                  function mySortRow(a,b){
+                                    return a.row_no - b.row_no;
+                                  }
+
+                                  function mySortCol(a,b){
+                                    return a.col_no - b.col_no;
+                                  }
+
+                                  $scope.getStorageInfo = function(Hallno) {
+                                    $http.get('http://win8dev/SycWeb/GetPilesByHallno/' + Hallno).success(function(data) {
+                                      var tabData= data.Data;
+                                      tabData.sort(mySortRow);
+
+                                      var tabColLeft = [],tabColRight = [];
+                                      tabData.forEach(
+                                        function(data){
+                                          var tmp = new Object();
+
+                                          if(data.lock_status  == 0)
+                                          {
+                                            data.state = "success";
+                                          }
+                                          else
+                                          {
+                                            data.state = "danger";
+                                          }
+
+                                          if(data.col_no == 1)
+                                          {
+                                            tmp.left = data;
+                                            tabColLeft.push(data);
+                                          }
+                                          else
+                                          {
+                                            tmp.right = data;
+                                            tabColRight.push(data);
+                                          }
+                                        }
+                                      );
+
+                                      $scope.tabDataLR = [];
+                                      $scope.tabDataLR.push(tabColLeft);
+                                      $scope.tabDataLR.push(tabColRight);
+                                    });
+                                  }
+
+                                }])
+.controller('storeViewCtrl', ['$scope', '$stateParams', '$state', '$http',
+                              function($scope, $stateParams, $state, $http) {
+
+                                $scope.storeno = $state.params.storeno;
+                                $scope.rowNum = [1];
+                                $scope.error = "hh";
+                                $scope.dataToInsert = new Object();
+                                $scope.dataToInsert.SLAB_NO = "";
+                                $scope.dataToInsert.TIER_NO = 1;
+                                $scope.dataToInsert.pile_no = $scope.storeno;
+                                $('#moveAlert').hide();
+
+                                $scope.slabInfo = {
+                                  "steel_grade": "板坯钢种",
+                                  "slab_thick": "板坯厚度",
+                                  "slab_width": "板坯宽度",
+                                  "slab_length": "板坯长度",
+                                  "slab_weight": "板坯理重",
+                                  "tier_no": "板坯层号",
+                                  "roll_prg_no": "轧制计划",
+                                  "st_no": "出钢记号",
+                                  "slab_status": "板坯状态",
+                                  "slab_attribute": "板坯属性",
+                                  "hcr_flag": "hcr标志",
+                                  "heat_no": "炉次号",
+                                  "yc_flag": "余材坯",
+                                  "order_no": "生产订单号",
+                                  "act_weight": "实际重量",
+                                  "yard_no": "合格标志",
+                                  "plant_no": "铸机号"
+                                };
+
+                                $scope.treeOptions = {
+                                  dropped : function(event) {
+                                    var dataTmp = $scope.storeData;
+                                    var sendLength = dataTmp.length;
+                                    var dataToSend = [];
+                                    var indexTmp;
+
+                                    dataTmp.forEach(
+                                      function(elem,index)
+                                      {
+                                        var eleTmp = {};
+
+                                        indexTmp = sendLength - index;
+                                        if(elem.tier_no != indexTmp){
+                                          eleTmp.pile_no = elem.pile_no;
+                                          eleTmp.slab_no  = elem.slab_no;
+                                          eleTmp.tier_no = indexTmp;
+                                          eleTmp.index = index;
+                                          dataToSend.push(eleTmp);
+                                        }
+                                      }
+                                    )
+
+                                    if (dataToSend.length > 0){
+                                      $scope.error = "";
+                                      $http.post('http://win8dev/SycWeb/MoveSlab',
+                                                 dataToSend,
+                                                 {timeout: 1500}).
+                                      success(function(data) {
+                                        if(data.Status == true){
+
+                                          dataToSend.forEach(
+                                            function(elem)
+                                            {
+                                              dataTmp[elem.index].tier_no = elem.tier_no;
+                                            }
+                                          )
+                                          $('#moveAlert').hide();
+                                        }
+                                        else
+                                        {
+                                          $('#moveAlert').show();
+                                          $scope.error = data.Message;
+
+                                          $scope.hideOrNot = '';
+                                        }
+                                      }).
+                                      error(function(data, status) {
+                                        //$scope.hideOrNot = '';
+                                        $('#moveAlert').show();
+                                        $scope.error = "网络错误请重新提交，只需提起任意板坯并放在原处即可";
+                                      });
+                                    }
+                                    return true;
+                                  },
+                                };
+
+                                $http.get('http://win8dev/SycWeb/GetSlabByPileNo/' +
+                                          $scope.storeno).success(function(data) {
+                                  data.Data.sort(mySortTIER_NO);
+                                  $scope.storeData = data.Data;
+
+                                  data.Data.forEach(
+                                    function(elem,index)
+                                    {
+                                      $scope.rowNum.push(index + 2);
+                                    }
+                                  )
+                                });
+
+                                $scope.addGetInit = function()
+                                {
+                                  $scope.toGetData = [{"slab_id":""}];
+                                  $scope.hideOrNot = 'hide';
+                                  $scope.error = '';
+                                  $('#addGetAlert').hide();
+
+                                }
+
+                                $scope.toGet = function()
+                                {
+                                  var getDataToSent = [];
+                                  $scope.toGetData.forEach(
+                                    function(elem){
+                                      if(elem.slab_id != ""){
+                                        getDataToSent.push(elem.slab_id);
+                                      }
+                                    }
+                                  )
+
+                                  var dataObj = {
+                                      "BoolValue":true,
+                                      "StringValue":"String content"
+                                    };
+
+                                  var json = JSON.stringify(dataObj);
+
+                                  $http.post('http://win8dev/SycWeb/RequestSlab',
+                                             getDataToSent,
+                                             {timeout: 1500}).
+                                  success(function(data) {
+                                    if(data.Status == true){
+
+                                      $('#addGetAlert').hide();
+                                      $('#addGetModall').modal('hide');
+                                    }
+                                    else
+                                    {
+                                      $('#addGetAlert').show();
+                                      $scope.error = data.Message;
+
+                                      $scope.hideOrNot = '';
+                                    }
+                                  }).
+                                  error(function(data, status) {
+                                    //$scope.hideOrNot = '';
+                                    $('#addGetAlert').show();
+                                    $scope.error = "网络错误";
+                                  });
+                                }
+
+                                $scope.addToGet = function() {
+                                  $scope.toGetData.push({"slab_id":""});
+                                };
+
+                                $scope.myRemove = function(scope,index)
+                                {
+                                  $http.get("http://win8dev/SycWeb/RemoveSlab?slabno=" +
+                                            $scope.storeData[index].slab_no + "&pileno=" +
+                                            $scope.storeData[index].pile_no + "&tierno=" +
+                                            $scope.storeData[index].tier_no,$scope.dataToInsert,{timeout: 1500}).
+                                  success(function(data) {
+                                    if(data.Status == true){
+
+                                      scope.remove();
+                                      $scope.rowNum.pop();
+                                    }
+                                  }).
+                                  error(function(data, status) {
+                                  });
+                                };
+
+                                $scope.addSlabInit = function()
+                                {
+                                  $scope.dataToInsert.SLAB_NO = "";
+                                  $scope.dataToInsertTIER_NO = 1;
+                                  $('#addSlabAlert').hide();
+                                  $scope.error = '';
+                                }
+
+                                $scope.addSlab = function() {
+                                  //$scope.dataToInsert.SLAB_NO = "";
+                                  //$scope.dataToInsert.TIER_NO = "";
+                                  var addOrNot = true;
+                                  $scope.storeData.forEach(
+                                    function(elem)
+                                    {
+                                      if(elem.slab_no == $scope.dataToInsert.SLAB_NO)
+                                      {
+                                        $('#addSlabAlert').show();
+                                        $scope.error = "这块板坯已经在本堆垛中";
+
+                                        $scope.hideOrNot = '';
+                                        addOrNot = false;
+                                        return;
+                                      }
+                                    }
+                                  )
+
+                                  if(!addOrNot)
+                                  {
+                                    return
+                                  }
+
+                                  $http.post('http://win8dev/SycWeb/InsertSlab',$scope.dataToInsert,{timeout: 1500}).
+                                  success(function(data) {
+                                    if(data.Status == true){
+
+                                      $('#addSlabAlert').hide();
+                                      $('#addSlabModall').modal('hide');
+
+                                      $scope.storeData.splice($scope.storeData.length + 1 - $scope.dataToInsert.TIER_NO,
+                                                              0,
+                                                              data.Data).sort(mySortTIER_NO);
+                                      $scope.rowNum.push($scope.storeData.length + 1);
+                                    }
+                                    else
+                                    {
+                                      $('#addSlabAlert').show();
+                                      $scope.error = data.Message;
+
+                                      $scope.hideOrNot = '';
+                                    }
+                                  }).
+                                  error(function(data, status) {
+                                    //$scope.hideOrNot = '';
+                                    $('#addSlabAlert').show();
+                                    $scope.error = "网络错误";
+                                  });
+                                };
+
+                                  function mySortTIER_NO(a,b){
+                                    return b.tier_no  - a.tier_no ;
+                                  }
+                                }]);
diff --git a/app/js/dataService.js b/app/js/dataService.js
new file mode 100644
index 0000000000..d61bd262a3
--- /dev/null
+++ b/app/js/dataService.js
@@ -0,0 +1,7 @@
+var dataServices = angular.module('dataServices',[]);
+
+dataServices.factory('data', [function() {
+  var storeage = {};
+  return storeage;
+
+}]);
diff --git a/app/partials/funcPage.html b/app/partials/funcPage.html
new file mode 100644
index 0000000000..ed4d3c9183
--- /dev/null
+++ b/app/partials/funcPage.html
@@ -0,0 +1,32 @@
+<!-- Main jumbotron for a primary marketing message or call to action -->
+<div class="jumbotron">
+    <div class="container">
+        <h1>欢迎! {{name}} </h1>
+        <p>用户</p>
+        <p><a href="#" class="btn btn-primary btn-lg" role="button">注销 &raquo;</a></p>
+    </div>
+</div>
+
+<!-- Example row of columns -->
+<div class="row">
+    <div class="col-md-3">
+        <h2>仓库图示</h2>
+        <p>sus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+        <p><a class="btn btn-default" href="#/storageViewPage" ui-sref="navTemplate.storageView" role="button">进入 &raquo;</a></p>
+    </div>
+    <div class="col-md-3">
+        <h2>板坯明细</h2>
+        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+    </div>
+    <div class="col-md-3">
+        <h2>仓库倒垛</h2>
+        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+    </div>
+    <div class="col-md-3">
+        <h2>仓库报表</h2>
+        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+    </div>
+</div>
diff --git a/app/partials/loginPage.html b/app/partials/loginPage.html
new file mode 100644
index 0000000000..6d179c2846
--- /dev/null
+++ b/app/partials/loginPage.html
@@ -0,0 +1,62 @@
+<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">MASIC仓库管理系统</a>
+        </div>
+        <div class="navbar-collapse collapse">
+          <form class="navbar-form navbar-right" role="form">
+            <div class="form-group">
+              <input ng-model="name" type="text" placeholder="用户名" class="form-control">
+            </div>
+            <div class="form-group">
+              <input ng-model="password" type="password" placeholder="密码" class="form-control">
+            </div>
+              <a href="#/funcPage"  ng-click="setPassword()"  ui-sref="navTemplate.func()">登录</a>
+            <!--<button type="submit" class="btn btn-success">Sign in</button>-->
+          </form>
+        </div><!--/.navbar-collapse -->
+      </div>
+    </div>
+
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron">
+      <div class="container">
+        <h1>欢迎使用</h1>
+        <p>MASIC仓库管理系统介绍</p>
+        <p><a class="btn btn-primary btn-lg" role="button">关于我们 &raquo;</a></p>
+      </div>
+    </div>
+
+    <div class="container">
+      <!-- Example row of columns -->
+      <div class="row">
+        <div class="col-md-6">
+          <h2>特色</h2>
+          <p>sus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+        </div>
+        <div class="col-md-3">
+          <h2>特点</h2>
+          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+       </div>
+        <div class="col-md-3">
+          <h2>优势</h2>
+          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
+        </div>
+      </div>
+
+      <hr>
+
+      <footer>
+        <p>&copy; MASIC 2014</p>
+      </footer>
+    </div> <!-- /container -->
+
diff --git a/app/partials/navTemplate.html b/app/partials/navTemplate.html
new file mode 100644
index 0000000000..e912bb2f74
--- /dev/null
+++ b/app/partials/navTemplate.html
@@ -0,0 +1,49 @@
+<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <div class="container">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">MASIC仓库管理系统</a>
+
+        </div>
+        <div class="navbar-collapse collapse">
+            <form class="navbar-form navbar-right" role="form">
+                <a href="#" class="navbar-link">注销</a>
+                <!--<button type="submit" class="btn btn-success">Sign in</button>-->
+            </form>
+        </div><!--/.navbar-collapse -->
+    </div>
+</div>
+
+<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
+    <div class="navbar-collapse collapse">
+        <ul class="nav nav-pills nav-justified">
+            <li class="active">
+                <a href="#/funcPage/{{name}}/{{password}}"
+                   ui-sref="navTemplate.func({name:name,password:password})">功能主页</a>
+            </li>
+            <li>
+                <a href="#/storageViewPage"
+                   ui-sref="navTemplate.storageView" role="button">仓库图示</a></li>
+            <li><a href="">板坯明细</a></li>
+            <li><a href="">仓库倒垛</a></li>
+            <li><a href="">仓库报表</a></li>
+        </ul>
+    </div>
+</nav>
+
+<div class="container">
+    <div ui-view style="padding-top: 70px"></div>
+
+
+    <hr>
+
+    <footer style="padding-bottom: 50px">
+        <p>&copy; MASIC 2014</p>
+    </footer>
+</div> <!-- /container -->
+
diff --git a/app/partials/partial1.html b/app/partials/partial1.html
deleted file mode 100644
index 89459a65ca..0000000000
--- a/app/partials/partial1.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>This is the partial for view 1.</p>
diff --git a/app/partials/partial2.html b/app/partials/partial2.html
deleted file mode 100644
index b6503ee11a..0000000000
--- a/app/partials/partial2.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<p>This is the partial for view 2.</p>
-<p>
-  Showing of 'interpolate' filter:
-  {{ 'Current version is v%VERSION%.' | interpolate }}
-</p>
diff --git a/app/partials/storageViewPage.html b/app/partials/storageViewPage.html
new file mode 100644
index 0000000000..38bfe21feb
--- /dev/null
+++ b/app/partials/storageViewPage.html
@@ -0,0 +1,62 @@
+<ul class="nav nav-tabs">
+    <li ng-repeat="num in storageNum">
+        <a href="/#pile{{num}}" ui-sref="navTemplate.storageView" data-toggle="tab" ng-click="getStorageInfo(num)">第{{num}}跨</a>
+    </li>
+</ul>
+
+<div class="tab-content" >
+    <div ng-repeat="num in storageNum" class="tab-pane" id="pile{{num}}">
+
+
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-6" ng-repeat="tdata in tabDataLR">
+                    <div class="panel panel-default" >
+                        <!-- Default panel contents -->
+                        <div class="panel-heading">Panel heading</div>
+
+                        <ul class="list-group" ng-repeat="uldata in tdata">
+                            <li class="list-group-item success">
+                                <a type="button" href="#/storeViewPage/{{uldata.pile_no}}"
+                                   ui-sref="navTemplate.storeView({storeno:uldata.pile_no})"
+                                   class="btn btn-lg btn-block btn-{{uldata.state}}">
+                                    <span class="label label-warning pull-left">
+                                        {{uldata.slab_count}}</span>
+                                    {{uldata.pile_no}}
+
+                                    <span class="badge pull-right">{{uldata.row_no}}</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--<table class="table table-striped">
+<thead>
+<tr>
+<th>第一列堆垛信息</th>
+<th>第二列堆垛信息</th>
+</tr>
+</thead>
+<tbody ng-repeat="tdata in tabDataLR">
+<tr>
+<td>
+<button type="button" class="btn btn-{{tdata.left.state}}">
+<span class="badge">{{tdata.left.number}}
+</span>
+{{tdata.left.num}}
+<span class="badge">{{tdata.left.row}}</span>
+</button>
+</td>
+<td>
+<a type="button" href="#/storeViewPage/:pileno" class="btn btn-{{tdata.right.state}}">
+<span class="badge">{{tdata.right.number}}</span>
+{{tdata.right.num}}
+<span class="badge">{{tdata.right.row}}</span></a>
+</td>
+</tr>
+</tbody>
+</table>/-->
+    </div>
+</div>
diff --git a/app/partials/storeViewPage.html b/app/partials/storeViewPage.html
new file mode 100644
index 0000000000..e0ccb1814c
--- /dev/null
+++ b/app/partials/storeViewPage.html
@@ -0,0 +1,186 @@
+<div class="row" style="padding-top: 45px">
+    <div class="col-sm-3"/>
+    <div class="col-sm-6">
+        <div id="moveAlert" class="alert alert-danger alert-dismissable fade in">
+            <button type="button" class="close" aria-hidden="true">&times;</button>
+            <strong>出错!</strong>{{error}}
+        </div>
+        <div class="panel panel-default">
+            <!-- Default panel contents -->
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-xs-4">
+                        <button class="btn btn-primary pull-left" ng-click="addGetInit()" data-toggle="modal"
+                                data-target="#addGetModall">
+                            <span class="glyphicon glyphicon-cloud-download"></span>
+                        </button>
+                    </div>
+                    <div class="col-xs-4">{{storeno}}</div>
+                    <div class="col-xs-4">
+                        <button class="btn btn-primary pull-right" ng-click="addSlabInit()" data-toggle="modal"
+                                data-target="#addSlabModall">
+                            <span class="glyphicon glyphicon-plus-sign"></span>
+                        </button></div>
+                </div>
+            </div>
+
+            <div ui-tree="treeOptions">
+                <ol ui-tree-nodes ng-model="storeData">
+                    <li class="list-group-item" ng-repeat="liData in storeData" ui-tree-node>
+                        <button type="button" class="btn btn-default" ng-click="myRemove(this,$index)">
+                            <span class="glyphicon glyphicon glyphicon-minus-sign"></span>
+                        </button>
+                        <button popover class="btn btn-default"
+                           data-toggle="popover"
+                           data-html="true"
+                           data-placement = "right"
+                           data-trigger = "focus"
+                           data-content="
+                                         <div class='table-responsive'>
+                                         <table class='table table-condensed'>
+                                         <tbody>
+                                         <tr>
+                                         <td>板坯钢种</td>
+                                         <td>{{liData.steel_grade}}</td>
+                                         <td>板坯厚度</td>
+                                         <td>{{liData.slab_thick}}</td>
+                                         </tr>
+                                         <tr>
+                                         <td>板坯宽度</td>
+                                         <td>{{liData.slab_width}}</td>
+                                         <td>板坯长度</td>
+                                         <td>{{liData.slab_length}}</td>
+                                         </tr>
+                                         <tr>
+                                         <td>板坯理重</td>
+                                         <td>{{liData.slab_weight}}</td>
+                                         <td>铸机号</td>
+                                         <td>{{liData.plant_no}}</td>
+                                         </tr>
+                                         <tr>
+                                         <td>轧制计划</td>
+                                         <td>{{liData.roll_prg_no}}</td>
+                                         <td>出钢记号</td>
+                                         <td>{{liData.st_no}}</td>
+                                         </tr>
+                                         <tr>
+                                         <td>板坯状态</td>
+                                         <td>{{liData.slab_status}}</td>
+                                         <td>板坯属性</td>
+                                         <td>{{liData.slab_attribute}}</td>
+                                         </tr>
+                                         <tr>
+                                         <td>hcr标志</td>
+                                         <td>{{liData.hcr_flag}}</td>
+                                         <td>炉次号</td>
+                                         <td>{{liData.heat_no}}</td>
+                                         </tr>
+                                         <tr>
+                                         <td>余材坯</td>
+                                         <td>{{liData.yc_flag}}</td>
+                                         <td>生产订单号</td>
+                                         <td>{{liData.order_no}}</td>
+                                         </tr>
+                                         <tr>
+                                         <td>实际重量</td>
+                                         <td>{{liData.act_weight}}</td>
+                                         <td>合格标志</td>
+                                         <td>{{liData.yard_no}}</td>
+                                         </tr>
+                                         </tbody>
+                                         </table>
+                                         </div>"
+                           >
+                            {{liData.slab_no}}
+                        </button>
+                        <div class="pull-right tree-handle ng-scope angular-ui-tree-handle btn-lg" ui-tree-handle>
+                            <span class="glyphicon glyphicon-list"></span>
+                        </div>
+                        <span class="badge">{{storeData.length - $index}}</span>
+
+                    </li>
+                </ol>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-3">
+    <!--
+    <div class="col-sm-6">
+        <h3>Full tree</h3>
+        <pre class="code">{{rowNum}},{{storeData.length}},{{ storeData | json }}</pre>
+    </div>
+    -->
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="addGetModall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+
+            </div>
+            <div class="modal-body">
+                <form class="form-horizontal" role="form">
+                    <div class="form-group"  ng-repeat="getData in toGetData">
+                        <label for="inputSLAB_NO" class="col-sm-3 control-label">板坯号</label>
+                        <div class="col-sm-5">
+                            <input type="text" ng-model="getData.slab_id" class="form-control" id="inputSLAB_NO" placeholder="板坯号">
+                        </div>
+                    </div>
+                    <div id="addGetAlert" class="alert alert-danger alert-dismissable fade in">
+                        <button type="button" class="close" aria-hidden="true">&times;</button>
+                        <strong>出错!</strong>{{error}}
+                    </div>
+
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" ng-click="addToGet()">
+                    add
+                </button>
+                <button type="button" class="btn btn-primary" ng-click="toGet()">Save changes</button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="addSlabModall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+            </div>
+            <div class="modal-body">
+                <form class="form-horizontal" role="form">
+                    <div class="form-group">
+                        <label for="inputSLAB_NO" class="col-sm-3 control-label">板坯号</label>
+                        <div class="col-sm-5">
+                            <input type="text" ng-model="dataToInsert.SLAB_NO" class="form-control" id="inputSLAB_NO" placeholder="板坯号">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="inputRow" class="col-sm-3 control-label">板坯所在的层</label>
+                        <div class="col-sm-5">
+                            <select class="form-control" id="inputRow"
+                                    ng-model="dataToInsert.TIER_NO" ng-options="row for row in rowNum">
+                            </select>
+                        </div>
+                    </div>
+                    <div id="addSlabAlert" class="alert alert-danger alert-dismissable fade in">
+                        <button type="button" class="close" aria-hidden="true">&times;</button>
+                        <strong>出错!</strong>{{error}}
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" ng-click="addSlab()">Save changes</button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div>
diff --git a/bower.json b/bower.json
index 19e683e032..41b30084ed 100644
--- a/bower.json
+++ b/bower.json
@@ -7,9 +7,19 @@
   "private": true,
   "dependencies": {
     "angular": "1.2.x",
-    "angular-route": "1.2.x",
     "angular-loader": "1.2.x",
-    "angular-mocks": "~1.2.x",
-    "html5-boilerplate": "~4.3.0"
+    "html5-boilerplate": "~4.3.0",
+    "angular-mocks": "~1.2.15",
+    "bootstrap": "~3.1.1",
+    "angular-route": "~1.2.15",
+    "angular-ui-router": "0.2.10",
+    "angular-resource": "~1.2.15",
+    "jquery": "1.11.1",
+    "jqueryui": "1.10.4",
+    "angular-animate": "~1.2.15",
+    "angular-ui-tree": "2.1.2",
+    "ngInfiniteScroll": "1.0.0",
+    "ui-sortable": "https://github.com/angular-ui/ui-sortable/raw/master/src/sortable.js",
+    "jsencrypt": "2.1.0"
   }
 }
diff --git a/package.json b/package.json
index 85327c62cd..023a763ea9 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,16 @@
     "http-server": "^0.6.1",
     "bower": "^1.3.1",
     "shelljs": "^0.2.6",
-    "karma-junit-reporter": "^0.2.2"
+    "karma-junit-reporter": "^0.2.2",
+    "express": "4.3.1",
+    "node-rest-client": "0.8.6"
   },
   "scripts": {
     "postinstall": "bower install",
 
     "prestart": "npm install",
-    "start": "http-server -a localhost -p 8000",
+    "poststart": "http-server -p 8000",
+    "start": "node app/app.js",
 
     "pretest": "npm install",
     "test": "karma start test/karma.conf.js",