Added FileUpload support

OGKevin · Apr 10, 2017 · eb1d7a8 · eb1d7a8
1 parent 33b6ef1
commit eb1d7a8
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 190 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -10,7 +10,9 @@ before_install:
 install:
   - pip install -r requirements.txt
   - pip install coveralls
-  - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install $TRAVIS_NODE_VERSION
+  - . $HOME/.nvm/nvm.sh
+  - nvm install stable
+  - nvm use stable
   - npm install
 before_script:
   - sudo /etc/init.d/postgresql stop

diff --git a/BunqWebApp/settings.py b/BunqWebApp/settings.py
@@ -45,7 +45,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = False
 
-ALLOWED_HOSTS = ['.combunqweb.herokuapp.com', '.localhost']
+ALLOWED_HOSTS = ['.combunqweb.herokuapp.com', '.127.0.0.1']
 
 
 # Application definition

diff --git a/Manager/forms.py b/Manager/forms.py
@@ -3,4 +3,4 @@
 class GetNewData(forms.Form):
     initialText = '"Datum";"Bedrag";"Rekening";"Tegenrekening";"Naam";"Omschrijving"\n"2017-03-31";"-0,01";"NL01BUNQ1234567890";"NL48ABNA0502830042";"Spotify by Adyen";"Payment description"\n"2017-03-31";"1,64";"NL01BUNQ1234567890";"NL01BUNQ1234567890";"bunq";"Slice heeft deze request verstuurd voor de groep Family."\n\n\n#Only dutch headers supported atm\n#Only Bunq CSV supported atm, or place 2 columns with headers \'Bedrag\'(ammount) and \'Naam\'(name)\n#Press \'via CSV text\' to see this example in action\n#Lines that begin with \'#\' wil be ignored'
     JSONTransactions = forms.CharField(initial = initialText, widget = forms.Textarea, label='')
-    # JSONTransactionsFile = forms.FileField(label='')
+    JSONTransactionsFile = forms.FileField(label='')
diff --git a/static/Manager/JS/index.js b/static/Manager/JS/index.js
@@ -1,175 +1,64 @@
 $(function() {
     $("#textCSV").click(function(event) {
         // sendPost()
-    
+
         input = $("#id_JSONTransactions").val()
         console.log('click');
         console.log(input);
         parseCSV(input)
     });
-    $('#fileCSV').click(function(event) {
-        file = $('#file')[0].files[0]
-        complete = function(results, file) {
-            getUserGraphs(results);
-        };
-        Configuration = {
-            delimiter: "", // auto-detect
-            newline: "", // auto-detect
-            quoteChar: '"',
-            header: true,
-            dynamicTyping: true,
-            preview: 0,
-            encoding: "",
-            worker: false,
-            comments: true,
-            step: undefined,
-            complete: complete,
-            error: undefined,
-            download: false,
-            skipEmptyLines: true,
-            chunk: undefined,
-            fastMode: undefined,
-            beforeFirstChunk: undefined,
-            withCredentials: undefined
-        };
-        Papa.parse(file, Configuration);
 
+    $('#fileCSV').click(function(event) {
+        // event.preventDefault()
+        console.log('clikc file upload ');
 
-    })
+        /* Act on the event */
+        input = $('#id_JSONTransactionsFile')[0].files[0]
+        console.log(input);
+        parseCSV(input)
+    });
 });
 
-function getGraphsDB(data) {
-    income = [],
-        expenses = [];
-    for (var i = 0; i < data.length; i++) {
-        if (data[i][1] > 0) {
-            income.push({
-                'catName': data[i][0],
-                'ammount': data[i][1]
-            })
-
-        } else {
-            expenses.push({
-                'catName': data[i][0],
-                'ammount': data[i][1] * -1
-            })
-
-        }
-    }
-
-    var chart = AmCharts.makeChart("chartdiv", {
-        "type": "pie",
-        "theme": "light",
-        "dataProvider": income,
-        "valueField": "ammount",
-        "titleField": "catName",
-        "balloon": {
-            "fixedPosition": true
-        },
-        "export": {
-            "enabled": false
-        }
-    });
-    var chart = AmCharts.makeChart("chartdiv2", {
-        "type": "pie",
-        "theme": "light",
-        "dataProvider": expenses,
-        "valueField": "ammount",
-        "titleField": "catName",
-        "balloon": {
-            "fixedPosition": true
-        },
+function parseCSV(csv) {
 
-        "export": {
-            "enabled": false
-        }
-    });
+    complete = function(results, file) {
+        console.log('parse complete');
+        console.log(results.data);
+        sendPost(results);
+        // console.log(results);
+    };
+    Configuration = {
+        delimiter: "", // auto-detect
+        newline: "", // auto-detect
+        quoteChar: '"',
+        header: true,
+        dynamicTyping: true,
+        preview: 0,
+        encoding: "",
+        worker: false,
+        comments: true,
+        step: undefined,
+        complete: complete,
+        error: undefined,
+        download: false,
+        skipEmptyLines: true,
+        chunk: undefined,
+        fastMode: undefined,
+        beforeFirstChunk: undefined,
+        withCredentials: undefined
+    };
+    Papa.parse(csv, Configuration);
 }
 
-function getUserGraphs(results) {
-    income = []
-    expenses = []
-    for (var i = 0; i < results.data.length; i++) {
-        number = Number(results.data[i].Bedrag.replace(",", '.'))
-        name = results.data[i].Naam
-        if (number < 0) {
-            expenses.push({
-                'name': name,
-                'ammount': number * -1
-            })
-        } else {
-            income.push({
-                'name': name,
-                'ammount': number
-            })
-        }
-
-    }
-
-    var chart = AmCharts.makeChart("chartdiv4", {
-        "type": "pie",
-        "theme": "light",
-        "dataProvider": expenses,
-        "valueField": "ammount",
-        "titleField": "name",
-        "colorField": "color",
-        "balloon": {
-            "fixedPosition": true
-        }
-    });
-    var chart = AmCharts.makeChart("chartdiv3", {
-        "type": "pie",
-        "theme": "light",
-        "dataProvider": income,
-        "valueField": "ammount",
-        "titleField": "name",
-        "colorField": "color",
-        "balloon": {
-            "fixedPosition": true
-        }
-    });
-}
-function parseCSV(csv) {
-
-  complete = function(results, file) {
-    console.log('parse complete');
-    console.log(results.data);
-          sendPost(results);
-      };
-      Configuration = {
-          delimiter: "", // auto-detect
-          newline: "", // auto-detect
-          quoteChar: '"',
-          header: true,
-          dynamicTyping: true,
-          preview: 0,
-          encoding: "",
-          worker: false,
-          comments: true,
-          step: undefined,
-          complete: complete,
-          error: undefined,
-          download: false,
-          skipEmptyLines: true,
-          chunk: undefined,
-          fastMode: undefined,
-          beforeFirstChunk: undefined,
-          withCredentials: undefined
-      };
-      Papa.parse(csv, Configuration);
-}
 function sendPost(json) {
+    console.log('sendpost has been called ');
     csrftoken = Cookies.get('csrftoken')
 
     function csrfSafeMethod(method) {
         // these HTTP methods do not require CSRF protection
         return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
     }
-frm = $("#textCSVForm");
-frm.submit(function(event) {
-  console.log('submiting before prevent ');
-    event.preventDefault()
-    console.log('submitting');
+    frm = $("#textCSVForm");
     $.ajax({
             url: frm.attr('action'),
             type: frm.attr('method'),
@@ -184,22 +73,20 @@ frm.submit(function(event) {
             }
         })
         .done(function(response) {
-          console.log(response);
-          console.log(typeof(response));
-          console.log(JSON.parse(response));
-          sortedJSON = JSON.parse(response);
-          getUserGraphs2(sortedJSON);
-          
+            console.log(response);
+            console.log(typeof(response));
+            console.log(JSON.parse(response));
+            sortedJSON = JSON.parse(response);
+            getUserGraphs(sortedJSON);
+
         })
         .fail(function() {})
         .always(function() {
-          console.log('send');
+            console.log('send');
         });
-});
-
 }
 
-function getUserGraphs2(data) {
+function getUserGraphs(data) {
     income = [],
         expenses = [];
     for (var i = 0; i < data.length; i++) {

diff --git a/templates/Manager/index.html b/templates/Manager/index.html
@@ -4,40 +4,20 @@
 	<script src="{%static "amcharts/dist/amcharts/amcharts.js"%}"></script>
 	<script src="{%static "amcharts/dist/amcharts/pie.js"%}"></script>
 	<script src="{%static "amcharts/dist/amcharts/themes/light.js"%}"></script>
-	<script>
-		// data1 = {{simpleData | safe}};
-	</script>
 	<script type='text/javascript' src="{%static "jquery/dist/jquery.min.js"%}"></script>
 	<script type='text/javascript'src="{%static "papaparse/papaparse.min.js"%}"></script>
 	<script type='text/javascript'src="{%static "js-cookie/src/js.cookie.js"%}"></script>
 	<script type="text/javascript" src='{%static 'Manager/JS/index.js'%}'></script>
-	<!-- <script>getGraphsDB(data1)</script> -->
 </head>
-<h1>Whitout 'DB'</h1>
-<div>
-
-	<textarea id="input" rows="10">"Datum";"Bedrag";"Rekening";"Tegenrekening";"Naam";"Omschrijving"
-"2017-03-31";"-0,01";"NL01BUNQ1234567890";"NL48ABNA0502830042";"Spotify by Adyen";"Payment description"
-"2017-03-31";"1,64";"NL01BUNQ1234567890";"NL01BUNQ1234567890";"bunq";"Slice heeft deze request verstuurd voor de groep Family."
-
-
-#Only dutch headers supported atm
-#Only Bunq CSV supported atm, or place 2 columns with headers 'Bedrag'(ammount) and 'Naam'(name)
-#Press 'via CSV text' to see this example in action
-#Lines that begin with '#' wil be ignored
-</textarea>
-	<!-- <button id='textCSV'>Via CSV text</button> -->
-	<input id='file' type="file" accept=".csv" name="files"/>
-	<button id="fileCSV">Via CSV Upload</button>
-</div>
-
-<div class="container">
-	<div id="chartdiv3" class="chartdiv"></div>
-	<div id="chartdiv4" class="chartdiv"></div>
-</div>
 <h1>input data to DB categorized and back</h1>
 <form id='textCSVForm' class="" action="" method="post">
 	{% csrf_token %}
 	{{from}}
-	<button name='' id="textCSV" type="" name="">Via CSV text</button>
 </form>
+<button name='' id="textCSV" type="" name="">Via CSV text</button>
+<button id="fileCSV">Via CSV Upload</button>
+
+<div class="container">
+	<div id="chartdiv3" class="chartdiv"></div>
+	<div id="chartdiv4" class="chartdiv"></div>
+</div>