GCal Coupling: Management Site - decoupled Email from profile

eventplanner_gcal/templates/eventplanner_gcal/management.html

@@ -0,0 +1,110 @@
+{% extends "website/base.html" %}
+{% load sekizai_tags staticfiles %}
+
+{% block content %}
+
+    {% addtoblock "css" strip  %}
+        <link rel="stylesheet" href="{{STATIC_URL}}/css/bootstrap-switch.min.css" type="text/css" media="screen" />
+    {% endaddtoblock %}
+
+    {% addtoblock "css" %}
+        <style>
+            h5 {
+                padding-top: 20px;
+            }
+            #errorlabel {
+                color: red;
+                margin: 10px;
+                font-size: 12px;
+            }
+            #activate {
+                margin-top: 30px;
+            }
+        </style>
+
+    {% endaddtoblock %}
+
+    {% addtoblock "js" strip %}
+        <script src="{{STATIC_URL}}/js/bootstrap-switch.min.js"></script>
+    {% endaddtoblock %}
+
+    {% addtoblock "js" %}
+        <script>
+            $("[name='my-checkbox']").bootstrapSwitch();
+
+            function endsWith(str, suffix) {
+               return str.indexOf(suffix, str.length - suffix.length) !== -1;
+            }
+            validateEmail = function() {
+                if ( endsWith( $("#id_email").val(), "@gmail.com") ||
+                     endsWith( $("#id_email").val(), "@googlemail.com")   ) {
+                    // Activate submit button
+                    $("#activate").prop("disabled", false);
+                    $("#errorlabel").html("");
+                } else {
+                    $("#activate").prop("disabled", true);
+                    $("#errorlabel").html("Erlaubte Endung: <em>@gmail.com</em> oder<em>@googlemail.com</em>");
+                }
+            }
+
+            $("#id_email").change( validateEmail );
+            validateEmail();
+
+        </script>
+    {% endaddtoblock %}
+
+
+
+
+    <div class="container">
+	    <div class="row">
+            <div class="span12">
+                 <h2>Google Kalender Anbindung</h2>
+            </div>
+
+
+            <div class="span6">
+                <p>
+                    <h5>NEU</h5>
+                    Die Blechreiz Termine können jetzt automatisch in den eigenen Google Kalender übernommen werden.
+                    Auch vom Google Kalender aus kann man sich dann für Termine eintragen, direkt vom Handy oder Tablet aus.
+                </p>
+
+                <p>
+                    <h5>SO GEHTS:</h5>
+                    Einfach die eigene Google Mail Adresse angeben und die Kopplung aktivieren.
+                </p>
+
+
+                <h5>KOPPLUNG:</h5>
+
+
+
+                <form method="POST" >
+                    {% csrf_token %}
+
+                    {% if enabled %}
+                        Kopplung aktiviert für <em>{{ mail }}</em>.
+                        <input type="hidden" name="activate" value="0" >
+                        <br><br>
+                        <input class="btn btn-primary" value="Deaktivieren" type="submit">
+                    {% else %}
+                        <input type="hidden" name="activate" value="1" >
+                        <label for="id_email">Email:</label>
+                        <input id="id_email" type="text"  placeholder="GMail Adresse" name="email">
+                        <br>
+                        <span id="errorlabel"></span>
+                        <br>
+                        <input id="activate" class="btn btn-primary" value="Aktivieren" type="submit">
+                    {% endif %}
+
+                </form>
+            </div>
+
+            <div class="span3 offset1">
+                <img src="{{STATIC_URL}}/img/google_cal.png">
+            </div>
+        </div>
+    </div>
+
+{% endblock %}