tps/views/definition.handlebars

<div ng-app="App" ng-controller="AppController">
    <form ng-submit="Submit()">
        <input type="text" ng-model="Model.name"/>
        <input type="text" ng-model="Model.description"/>
        <h2>Rows</h2>
        <div ng-repeat="Row in Model.schema track by $index">
            <input type="text" ng-model="Row.key"/>
            <select ng-model="Row.type" ng-options="v for v in Types"></select>
        </div>
        <input type="submit"/>
    </form>
    <form>
        <input type="file" data-import-csv class="form-control">
    </form>
</div>
<script>
var App = angular.module("App", []);
App.factory("Rows", [function()
{
    return function(inData)
    {
        console.log(inData);
    };
}]);
App.directive("importCsv", ["Rows", function(Rows)
{

    var directive = {};

    directive.link = function(inScope, inElement, inAttributes){

        function handlerEnter(inEvent){
            if(inEvent){
                inEvent.preventDefault();
            }
            inElement.addClass("Import");
            inEvent.dataTransfer.effectAllowed = 'copy';
            return false;
        }
        
        function handlerDrop(inEvent){
            inElement.removeClass("Import");
            if(inEvent){
                inEvent.preventDefault();
            }
            parse(event.dataTransfer.files[0]);
            return false;
        }
        
        function handlerChange(inEvent){
            inEvent.stopImmediatePropagation();
            parse(inEvent.target.files[0]);
        }
        
        
        function handlerLeave()
        {
            inElement.removeClass("Import");
        }
        
        function parse(inFile)
        {
            Papa.parse(inFile, {
                complete: function(inCSV)
                {
                    Rows(inCSV.data);
                    inScope.$apply();
                }
            });
        }

        
        inElement.on("dragenter dragstart dragend dragleave dragover drag drop", function (inEvent) {inEvent.preventDefault();});
        inElement.on('dragenter', handlerEnter);
        inElement.on('dragleave', handlerLeave);
        inElement.on('drop', handlerDrop);
        inElement.on('change', handlerChange);
        inElement.on('click', function(inEvent){
            inEvent.stopImmediatePropagation();
            
        })
    };
    return directive;
}]);
App.controller("AppController", ["$scope", "$http", function($scope, $http)
{
    console.log("init");
    $scope.Types = ["date", "text", "numeric"];
    $scope.Model = {
        "name": "DCARD",
        "description":"Discover Card",
        "type": "csv",
        "schema": [
            {
                "key": "Trans. Date",
                "type": "date"
            },
            {
                "key": "Post Date",
                "type": "date"
            },
            {
                "key": "Description",
                "type": "text"
            },
            {
                "key": "Amount",
                "type": "numeric"
            },
            {
                "key": "Category",
                "type": "text"
            }
        ],
        "unique_constraint": {
            "type": "key",
            "fields": [
                "{Post Date}",
                "{Trans. Date}",
                "{Description}"
            ]
        }
    };
    $scope.Submit = function()
    {
        console.log($scope.Model);

    var req = {
    method: 'POST',
    url: '/json',
    data: $scope.Model
    };

    $http(req).then(
        function(inSuccess){
            console.log(inSuccess);
        },
        function(inFailure)
        {
            console.log(inFailure);
        }
    );

    };
}]);



</script>