Add webpack into the build process

server/docker-compose.yml

@@ -1,18 +1,18 @@
-version: '2'
-
-services:
-  foochow-idioms-api:
-    image: foochow-idioms-api
-    build:
-      context: ./api
-      dockerfile: Dockerfile
-    ports: 
-      - "2052:80"
-    links:
-      - db:mongo
-    depends_on:
-      - db
-  db:
-    image: mongo
-    volumes:
-      - ./export:/import
+version: '2'
+
+services:
+  foochow-idioms-api:
+    image: foochow-idioms-api
+    build:
+      context: ./api
+      dockerfile: Dockerfile
+    ports: 
+      - "5000:80"
+    links:
+      - db:mongo
+    depends_on:
+      - db
+  db:
+    image: mongo
+    volumes:
+      - ./export:/import

www/.gitattributes

@@ -0,0 +1,4 @@
+*               text=auto
+*.js            text            eol=lf
+*.ts            text            eol=lf
+*.css           text            eol=lf

www/.gitignore

@@ -0,0 +1,3 @@
+# Ignore .js and source map files generated by TypeScript compiler
+app/**/*.js
+app/**/*.js.map

www/.vscode/settings.json

@@ -0,0 +1,9 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+     "files.exclude": {
+         "app/**/*.js": true,
+         "app/**/*.js.map": true
+     },
+     "typescript.tsdk": "./node_modules/typescript/lib"
+
+}

www/README.md

@@ -0,0 +1,8 @@
+# Web UI for Foochow Idioms
+
+## Build steps
+```
+npm install
+bower install
+gulp serve::dev
+```

www/app/app.ts

@@ -0,0 +1,34 @@
+"use strict";
+angular.module('app', ['ngRoute'])
+.constant("SERVER_API_URL","http://127.0.0.1:5000/api")
+.constant("SERVER_AUDIO_URL","/assets/audio/")
+
+.config(['$routeProvider', function ($routeProvider) {
+    $routeProvider
+        .when('/', {
+            templateUrl: 'app/views/welcome.tpl.html',
+            controller: 'homeCtrl'
+        })
+        .when('/idiom/:idiomtext*', {
+            templateUrl: 'app/views/showDetails.tpl.html',
+            controller: 'detailsCtrl',
+            caseInsensitiveMatch: true
+        })
+        .when('/help', {
+            templateUrl: 'app/views/help.tpl.html'
+            // controller: 'mainCtrl'
+        })
+        .when('/tags', {
+            templateUrl: 'app/views/tags.tpl.html' ,
+            controller: 'tagsCtrl'
+        })
+        .when('/apps', {
+            templateUrl: 'app/views/apps.tpl.html'
+        })
+        .otherwise({
+            redirectTo: '/'
+        });
+}]);
+
+require('./controllers');
+require('./services');

www/app/controllers/calloutCtrl.ts

@@ -0,0 +1,13 @@
+'use strict';
+
+CalloutCtrl.$inject = ['$scope', '$rootScope', '$location'];
+var $ = require('jquery');
+
+function CalloutCtrl($scope, $rootScope, $location) {
+    $scope.closeButtonClicked = function () {
+        $rootScope.$emit('CalloutHide');
+        $('.shareCallout').addClass('calloutHide').removeClass('calloutShow');
+    };
+};
+
+module.exports = CalloutCtrl;

www/app/controllers/detailsCtrl.ts

@@ -0,0 +1,114 @@
+"use strict";
+// workaround for global variables
+declare var Howl: any;
+declare var Tether: any;
+
+var DictUtils = require('../js/utils');
+
+DetailsCtrl.$inject  = ['$q','$scope', '$rootScope', '$location', '$routeParams', '$sce', 'DataService', "KageService", "SERVER_AUDIO_URL"];
+
+function DetailsCtrl($q, $scope, $rootScope, 
+                     $location, $routeParams, $sce, dataService, kageService, SERVER_AUDIO_URL) {
+
+    $scope.highlight = [];
+    $scope.highlightAnno = [];
+    console.log('detailsCtrl $scope init');
+    console.log($routeParams);
+    switchToIdiom($routeParams.idiomtext);
+
+    $scope.tagClicked = function (tagName) {
+        $rootScope.$emit("switchToTag", {'tag': tagName});
+        $rootScope.$emit("toggleSidebar", {'state': true});
+    };
+
+    $scope.playButtonClicked = function (filename) {
+        var uri = SERVER_AUDIO_URL + filename.replace('.wma', '.mp3');
+        var sound = new Howl({
+                src: [uri]
+            }).play();
+    };
+
+    //loadIdiom
+    function switchToIdiom (text) {
+        if (text) {
+            dataService.getIdiomByText(text).then(function (r) {
+                $scope.result = r;
+                var glyphs = DictUtils.getChars(r['field_text']);
+                var i;
+                var list=[];
+                for (i=0; i<glyphs.length; ++i) {
+                    list[i]={};
+                    list[i]['text']=glyphs[i];
+                }
+                $scope.field_text = list;
+                for (i=0; i<glyphs.length; ++i) {
+                    if ((glyphs[i][0]=='{' && glyphs[i][glyphs[i].length-1]=="}")
+                        || DictUtils.extendedGlyphs.indexOf(glyphs[i]) != -1) {
+                        kageService.getGlyphImage(glyphs[i],200,i).then(function (r) {
+                            console.log(r.id);
+                            $scope.field_text[r.id]['imgsrc'] = r.data;
+                        })
+                    }
+                }
+
+            }).catch(function () {
+                console.log('detailsCtrl: view change failed.');
+            });
+        }
+    };
+
+    function getGlyphImage(str) {
+
+
+    }
+
+    $scope.highOn = function (annoId) {
+        var indices = $scope.result['field_annotations'][annoId]['indices'];
+        var i;
+        for (i=0; i<indices.length; ++i) {
+            $scope.highlight[indices[i]]=true;
+        }
+        $scope.highlightAnno[annoId]=true;
+    };
+
+    $scope.highOff = function (annoId) {
+        var indices = $scope.result['field_annotations'][annoId]['indices'];
+        var i;
+        for (i=0; i<indices.length; ++i) {
+            $scope.highlight[indices[i]]=false;
+        }
+        $scope.highlightAnno[annoId]=false;
+    };
+
+    function showShareCallout() {
+        $('.shareCallout').addClass('calloutShow').removeClass("calloutHide");
+        var shareTether = new Tether({
+            element: '.shareCallout',
+            target: '.shareButton',
+            attachment: 'top center',
+            targetAttachment: 'bottom left',
+            constraints: [{
+                to: 'window',
+                pin: true
+            }]
+        });
+
+    }
+
+    function hideShareCallout() {
+        $('.shareCallout').addClass("calloutHide").removeClass('calloutShow');
+    }
+
+    $scope.showShare = showShareCallout;
+
+    $scope.$on('$destroy', function () {
+        hideShareCallout();
+
+    });
+
+    $scope.initShare = function (){
+        $(".ms-Panel").Panel();
+    }
+};
+
+module.exports = DetailsCtrl;