backend now uses calendar_id and this is the frontend upgrade

- calendar_id is unique and therefore creates less problems
- changing id of DOM from item.name to calendar_id

server/template/calendar.html

@@ -17,14 +17,14 @@
         <div style="width: 30%; float: left">
             <!-- Rounded switch -->
             <label class="switch">
-                <input class="toggle" id={{item.name}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
+                <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
                 <span class="slider round"></span>
             </label>
         </div>
 
         <!--Color Selector-->
         <div style="width: 30%; float: left">
-        <div class="colorPickSelector" id={{item.name}}  defaultColor={{item.color}}></div>
+        <div class="colorPickSelector" id={{item.calendarId}}  defaultColor={{item.color}}></div>
             <!--svg height="20" width="20">
                 <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
             </svg--> 
@@ -73,7 +73,6 @@
 
     ($(".colorPickSelector").each(function() {
         // console.log($( this )[0].attributes.getNamedItem("style"));
-
         var color = $( this )[0].attributes.getNamedItem("defaultcolor").nodeValue;
         var style = document.createAttribute("style");
         style.value = 'background-color: ' + color + '; color: ' + color + ';';
@@ -84,7 +83,7 @@
     }));
 
     function post(type, id, data) {
-        var url = "https://192.168.68.103.xip.io:1234/calendar";
+        var url = "calendar";
         var method = "POST";
         switch (type) {
             case "color":
@@ -125,4 +124,4 @@
     init = true;
 </script>
 
-{% endblock %}
+{% endblock %}