Facebook: Sharing meals and recipes

PLNech · Dec 15, 2015 · 47f2734 · 47f2734
1 parent f931fa8
commit 47f2734
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 48 deletions.
diff --git a/menus/static/base.css b/menus/static/base.css
@@ -48,3 +48,11 @@ h5.recipe-title, .unlike-recipe-form {
     margin-top: 15px;
     margin-bottom: 15px;
 }
+
+.btn-facebook{
+    color: white; !important;
+}
+
+.btn-facebook:hover{
+    color: white; !important;
+}
diff --git a/menus/static/bootstrap_overrides/statistics.css b/menus/static/bootstrap_overrides/statistics.css
@@ -1,4 +1,4 @@
 canvas {
     margin-top: 25px;
     margin-left: 70px;
-}
+}
diff --git a/menus/static/facebook.js b/menus/static/facebook.js
@@ -0,0 +1,29 @@
+function share_meal(starter, main, desert, picture_url) {
+    console.log("Sharing meal: ", starter, main, desert, picture_url);
+    var caption = 'MenuGen me conseille ce repas : ' + starter + ', ' + main + ' et ' + desert + '.';
+    var description = 'Et vous, que va-t\'il vous proposer ?';
+    FB.ui({
+            method: 'feed',
+            name: 'Mon repas',
+            picture: picture_url,
+            description: description,
+            caption: caption
+        },
+        function (response) {
+        });
+}
+
+function share_recipe(name, picture) {
+    console.log("Sharing recipe: ", name, picture);
+    var caption = 'MenuGen me conseille cette recette : ' + name + '.';
+    var description = 'Et vous, que va-t\'il vous proposer ?';
+    FB.ui({
+        method: 'feed',
+        name: 'Mon plat',
+        description: description,
+        picture: 'https://plnech.fr/files/menugen_logo.png',
+        caption: caption
+    },
+        function (response) {
+        });
+}
diff --git a/menus/templates/_base.html b/menus/templates/_base.html
@@ -17,41 +17,43 @@
     <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}"/>
     <link rel="stylesheet" type="text/css" href="{% static 'vendor/css/libs/jquery-photowall.css' %}"/>
     {% block css %}
-        <link rel="stylesheet" type="text/css" href='{% static 'bootstrap_overrides/tastes.css' %}' />
-        <link rel="stylesheet" type="text/css" href='{% static 'bootstrap_overrides/statistics.css' %}' />
+        <link rel="stylesheet" type="text/css" href='{% static 'bootstrap_overrides/tastes.css' %}'/>
+        <link rel="stylesheet" type="text/css" href='{% static 'bootstrap_overrides/statistics.css' %}'/>
     {% endblock %}
     <link type="image/x-icon" href="{% static 'favicon.png' %}" rel="shortcut icon"/>
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400'
+          rel='stylesheet' type='text/css'>
     <!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
     <script src="js/respond.min.js"></script>
     <![endif]-->
 </head>
 
 <body class="theme-white fixed-footer fixed-header fixed-leftmenu">
-<div id="theme-wrapper">
-    {% include '_header.html' %}
-    <div id="page-wrapper" class="container">
-        <div class="row">
-            {% if user.is_authenticated %}
-                {% include '_menu.html' %}
-                <div id="content-wrapper">
-            {% else %}
-                <div id="content-wrapper" style="margin-left: 0;">
-            {% endif %}
+    {% block body %}{% endblock %}
+    <div id="theme-wrapper">
+        {% include '_header.html' %}
+        <div id="page-wrapper" class="container">
             <div class="row">
-                {% block content %}{% endblock %}
-            </div>
-            </div>
+                {% if user.is_authenticated %}
+                    {% include '_menu.html' %}
+                    <div id="content-wrapper">
+                {% else %}
+                    <div id="content-wrapper" style="margin-left: 0;">
+                {% endif %}
+                <div class="row">
+                    {% block content %}{% endblock %}
+                </div>
+                </div>
 
-            {% include '_footer.html' %}
+                {% include '_footer.html' %}
+                </div>
             </div>
         </div>
     </div>
-</div>
 
-{% include '_common_js.html' %}
-{% block js %}{% endblock %}
+    {% include '_common_js.html' %}
+    {% block js %}{% endblock %}
 </body>
 
 </html>
diff --git a/menus/templates/_base_fb.html b/menus/templates/_base_fb.html
@@ -0,0 +1,26 @@
+{% extends '_base.html' %}
+{% load staticfiles %}
+{% block body %}
+    <div id="fb-root"></div>
+    <script>
+        window.fbAsyncInit = function () {
+            FB.init({
+                appId: '201028526898960',
+                xfbml: true,
+                version: 'v2.5'
+            });
+        };
+
+        (function (d, s, id) {
+            var js, fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) {
+                return;
+            }
+            js = d.createElement(s);
+            js.id = id;
+            js.src = "//connect.facebook.net/en_US/all.js";
+            fjs.parentNode.insertBefore(js, fjs);
+        }(document, 'script', 'facebook-jssdk'));
+    </script>
+    <script src="{% static 'facebook.js' %}"></script>
+{% endblock %}
diff --git a/menus/templates/menus/generation/generation.html b/menus/templates/menus/generation/generation.html
@@ -1,7 +1,7 @@
-{% extends '_base.html' %}
+{% extends '_base_fb.html' %}
 {% load planning_extras %}
+{% load utils_extras %}
 {% load staticfiles %}
-
 {% block content %}
     <div class="modal fade" id="shoppingListModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
@@ -99,12 +99,18 @@ <h3>Jour {{ forloop.counter }}</h3>
                                              class="slot well text-center" draggable="true">
                                             {% if meal %}
                                                 {% include 'menus/generation/slot.html' with aMeal=meal i=forloop.parentloop.counter0 j=forloop.counter0 %}
-                                                <btn class="btn btn-primary btn-details center-block"
-                                                     data-toggle="modal"
-                                                     href="{% url 'generation_meal_details' starter_id=meal.starter.id main_course_id=meal.main_course.id dessert_id=meal.dessert.id %}"
-                                                     data-target="#mealDetailsModal">
-                                                    Détails
-                                                </btn>
+                                                <div style="display: block">
+                                                    <btn class="btn btn-primary btn-details center-block"
+                                                         data-toggle="modal"
+                                                         href="{% url 'generation_meal_details' starter_id=meal.starter.id main_course_id=meal.main_course.id dessert_id=meal.dessert.id %}"
+                                                         data-target="#mealDetailsModal">
+                                                        Détails
+                                                    </btn>
+                                                    <btn class="btn btn-facebook btn-details center-block"
+                                                         onclick="share_meal('{{meal.starter.name}}', '{{meal.main_course.name}}', '{{meal.dessert.name}}', '{{ pics | index:0 }}')">
+                                                        Partager
+                                                    </btn>
+                                                </div>
                                             {% else %}
                                                 <div class="row">
                                                     <div class="col-md-12">

diff --git a/menus/templates/menus/generation/ingredients.html b/menus/templates/menus/generation/ingredients.html
@@ -2,6 +2,10 @@
     <div class="panel panel-default">
         <div class="panel-heading" role="tab" id="heading{{ id }}">
             <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion{{ id }}" href="#collapseOne{{ id }}" aria-expanded="false" aria-controls="collapseOne{{ id }}">
+{#                <btn class="btn btn-facebook btn-details center-block"#}
+{#                                                         onclick="share_meal('{{meal.starter.name}}', '{{meal.main_course.name}}', '{{meal.dessert.name}}', '{{ pics | index:0 }}')">#}
+{#                                                        Partager#}
+{#                                                    </btn>#}
                 <h4 class="panel-title">
                     Ingrédients
                 </h4>

diff --git a/menus/templates/menus/generation/recipe.html b/menus/templates/menus/generation/recipe.html
@@ -1,15 +1,16 @@
 <div class="recipe-title-container">
     <h5 class="recipe-title">{{ recipe.name }}</h5>
 
-{% if user.is_authenticated %}
-    <form class="form-horizontal" id="unlike-recipe-form" action="{% url 'unlike_recipe_message' recipe.id %}" method="POST">
-{% else %}
-    <form class="form-horizontal" id="unlike-recipe-form" action="{% url 'call_to_action' %}" method="POST">
-{% endif %}
-        {% csrf_token %}
-        <button type="submit" class="btn btn-danger btn-xs">
-            <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
-        </button>
+    {% if user.is_authenticated %}
+        <form class="form-horizontal" id="unlike-recipe-form" action="{% url 'unlike_recipe_message' recipe.id %}"
+              method="POST">
+    {% else %}
+        <form class="form-horizontal" id="unlike-recipe-form" action="{% url 'call_to_action' %}" method="POST">
+    {% endif %}
+    {% csrf_token %}
+    <button type="submit" class="btn btn-danger btn-xs">
+        <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span>
+    </button>
     </form>
 </div>
 <hr>
@@ -46,3 +47,7 @@ <h5 class="recipe-title">{{ recipe.name }}</h5>
         {% endif %}
     {% endfor %}
 </p>
+<btn class="btn btn-facebook btn-details center-block"
+     onclick="share_recipe('{{ recipe.name }}', '{{ recipe.picture }}')">
+    Partager
+</btn>
diff --git a/testing/templates/base.html b/testing/templates/base.html
@@ -9,7 +9,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
     <title>MenuGen - Testing</title>
 
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css/bootstrap/bootstrap.min.css' %}"/>
     <script src="{% static 'vendor/js/jquery.js' %}"></script>
 
     <!--[if lt IE 9]>
@@ -19,14 +18,10 @@
 </head>
 
 <body>
-
-  {% block content %}
-  {% endblock %}
-
-  <script src="{% static 'vendor/js/bootstrap.js' %}"></script>
-
-  {% block js %}
-  {% endblock %}
-
+    {% block content %}
+    {% endblock %}
+    <script src="{% static 'vendor/js/bootstrap.js' %}"></script>
+    {% block js %}
+    {% endblock %}
 </body>
 </html>