Modal popup result

flask-project/app.py

@@ -42,6 +42,7 @@ def generateProposition():
 
 @app.route("/submit-proposition",  methods = ['POST'])
 def submitProposition():
+    print("Proposition submitted")
     city = request.form['city']
     
     productType = request.form['productType']
@@ -57,9 +58,8 @@ def submitProposition():
     proposition = request.form['proposition']
         
     matchingTopologies, predictedSubscriberTakeOut = evaluateProposition(city, productType, proposition, moneyNeeds, customerExpNeeds, sustainabilityNeeds)
-    val = "matching topologies = {} and predictedSubscriberTakeOut = {}".format(",".join(matchingTopologies), predictedSubscriberTakeOut)
-    print(val)
-    return val
+
+    return {'matchingTopologies': matchingTopologies, 'predictedSubscriberTakeOut': predictedSubscriberTakeOut, 'subscriberDiff': predictedSubscriberTakeOut-int(subcount3)}
 
 
 if __name__ == "__main__":

flask-project/scripts/utils.py

@@ -245,7 +245,7 @@ def evaluateProposition(selectedCity, selectedProduct, userProposal, moneyNeeds,
     for topology in matchingTopologies:
         sumTopology = 0
         for moneyNeed in moneyNeeds:
-            #print(" Money need = {}, Topology is {}".format(moneyNeed, topology))
+            print(" Money need = {}, Topology is {}".format(moneyNeed, topology))
             sumTopology = sumTopology+int(moneyNeedsDict[moneyNeed][topology])
         
         for customerExp in customerExpNeeds:

flask-project/templates/newGame.html

@@ -362,26 +362,19 @@
 
 
 
-        <div id="dialog-content" style="display:none;max-width:500px;">
-            <h2>Hello, world!</h2>
-            <p>
-              <input type="text" value="" />
-            </p>
-            <p>
-              Try hitting the tab key and notice how the focus stays within the dialog
-              itself.
-            </p>
-            <p>
-              To close dialog hit the esc button, click on the overlay or just click the
-              close button.
-            </p>
-            <p>
-              Element used to launch the modal would receive focus back after closing.
-            </p>
+        <div id="dialog-content" class="content_block_one" style="display:none;max-width:500px;">
+            <div class="content-box ml_40" >
+                <div class="sec-title mb_20">
+                    <h6>Result</h2>
+                </div>
+                
+                    <p class='text-box mb_40' id="result">
+                    </p>
+                    <p class="inner-box mb_45" id="subscriberDiff">
+                    </p>
+            </div>
           </div>
-          <button data-fancybox data-src="#dialog-content">Launch Dialog</button>
-
-          
+          <button id="modal-button" data-fancybox data-src="#dialog-content" hidden>Launch Dialog</button>   
 
         <!--Scroll to top-->
         <div class="scroll-to-top">
@@ -438,12 +431,45 @@
             
             $("#submit-proposition").unbind().click( function (e) {
                 e.preventDefault()
-                $.post('/submit-proposition', $('#generate-proposition-form').serialize()+"&"+$('#submit-proposition-form').serialize(), function(data){
-                    
-                })
+                $.ajax({
+                    type: 'POST',
+                    async:false,
+                    url: '/submit-proposition',
+                    data: $('#generate-proposition-form').serialize()+"&"+$('#submit-proposition-form').serialize(),
+                    success: function(data){
+                        topologiesText = '<span>Overall your targeted demographic and proposition are focusing the three topologies below<span><br><ul>'
+                        data['matchingTopologies'].forEach(element => {
+                            topologiesText = topologiesText + '<li>'+element+'</li>'
+                        });   
+                        topologiesText = topologiesText + '</ul>'
+                        topologiesText = topologiesText + '<br> For your proposition the total predicted subscriber take out count is '+ data['predictedSubscriberTakeOut']
+                        $('#result').html(topologiesText)
+
+                        if(data['subscriberDiff'] < 0) {
+                            $('#subscriberDiff').html('Overall there is not a close match of your proposition to the main demographic. Takeout score difference = '+data['subscriberDiff'])
+                        }
+                        else if(data['subscriberDiff'] == 0) {
+                            $('#subscriberDiff').html('Amazing! Your proposition  exactly match the target subscriber take oup for year 3')
+                        }
+                        else {
+                            $('#subscriberDiff').html('Great Job! Your proposition exceeds the target subscriber take up for year 3. Additional takeout = '+data['subscriberDiff'])
+                            
+                        }
+                        $('#modal-button').fancybox().trigger('click');
+
+
+                 }})
             })
 
-            
+            /*
+                   <div id="dialog-content" style="display:none;max-width:500px;">
+            <h2>Result</h2>
+            <p id="result">
+            </p>
+            <p id="subscriberDiff">
+            </p>
+          </div> 
+            */
         });
     </script>