component.html

<polymer-element name="ceci-dataview" showdelete="true" showedit="true" attributes="showaddtoitem listschema showkey dataname datascope showedit showdelete" dataname="Items" extends="ceci-element">
  <template>
    <link rel="stylesheet" href="component.css">
    <div id="datascope"></div>
    <div id="keys-wrapper" >
      <h2 on-click="{{toggleKeyConfig}}" id="configureView">Configure View</h2>
      <div id="keys" show="no"></div>
    </div>
    <div id="items"></div>
    <shadow></shadow>
    <script type="text/json" id="ceci-definition">

    </script>
  </template>
  <ceci-definition>
    {
      "thumbnail": "./thumbnail.png",
      "description": "Display any data you have created using forms made with addform component.",
      "broadcasts": {
        "editItem": {
          "label": "Send Item",
          "description": "Broadcasts a reference to the record when the 'Edit' button is tapped."
        },
        "addToItem": {
          "description": "Broadcasts a reference to the record when the 'Add to' button is tapped.",
          "label": "Add to Item"
        },
        "sendItem": {
          "description": "Broadcasts a reference to the record when it is tapped.",
          "label": "View Item"
        }
      },
      "listeners": {
        "showItem": {
          "description": "Shows the data for this record.",
          "label": "Show item"
        }
      },
      "attributes": {
        "dataname": {
          "description": "Will try to show this kind of item in the saved data, i.e. 'Cats'",
          "label": "I show...",
          "editable": "text"
        },
        "showdelete": {
          "description": "Hides or shows the delete icon for each record.",
          "label": "Show Delete Link",
          "editable": "boolean"
        },
        "showedit": {
          "description": "Show 'Edit' button",
          "label": "Hides or shows the Edit button for each record.",
          "editable": "boolean"
        },
        "showaddtoitem": {
          "description": "Show 'Add To' Button",
          "label": "Hides or shows the 'Add to This' button",
          "editable": "boolean"
        }
      }
    }
  </ceci-definition>
  <tags>data</tags>
  <script>
    Polymer("ceci-dataview", {
      keyConfig: {},
      storedData: {},
      dataChangedEvent: new CustomEvent("storage"),
      ready: function(){
        this.super();
        this.datascope = [];
        this.$.configureView.textContent = this.gettext(this.localName + "/configureView") || this.$.configureView.textContent;
      },
      toggleKeyConfig: function(){
        var keysEl = this.shadowRoot.querySelector("#keys");
        if(keysEl.getAttribute("show") == "no") {
          keysEl.setAttribute("show","yes");
        } else {
          keysEl.setAttribute("show","no");
        }
      },
      showdeleteChanged: function(oldValue,newValue){
        this.showData();
      },
      showaddtoitemChanged: function(oldValue,newValue){
        this.showData();
      },
      showeditChanged: function(oldValue,newValue){
        this.showData();
      },
      datanameChanged: function (oldValue, newValue) {
        this.updateKeyUI();
        this.showData();
      },
      showItem: function(e){
        this.datascope = e;
      },
      datascopeChanged: function(){
        // If we want to indicate the scope of the data that is shown, there is where we'd do it.
        // var scopeEl = this.shadowRoot.querySelector("#datascope");
        this.updateKeyUI();
        this.showData();
      },
      deleteItem: function(id){
        var self = this;
        var ca = document.querySelector("ceci-app");
        if(!ca){
          window.addEventListener("CeciDataConnectionLoaded", function(){
            self._deleteItemFirebase(id);
          });
        }
        else {
          if(ca.firebase){
            this._deleteItemFirebase(id);
          }
        }
      },
      _deleteItemFirebase: function(id){
        var self = this;
        var ca = document.querySelector("ceci-app")
        ca.getFirebaseObject('form-data', "", function(data){
          self.storedData = data || {};
          for (var i = 0; i < self.datascope.length; i++){
            var scopeItem = self.datascope[i];
            self.storedData = self.storedData[scopeItem["dataset"]][scopeItem["index"]];
          }
          self.storedData = self.storedData[self.dataname] || [];
          self.storedData.splice(id, 1);
          ca.setFirebaseObject('form-data', data);
          window.dispatchEvent(self.dataChangedEvent);
        });
      },
      updateKeyUI: function(){
        var self = this;
        var ca = document.querySelector("ceci-app");
        if(!ca){
          window.addEventListener("CeciDataConnectionLoaded", function(){
            self._updateKeyUIFirebase();
          })
        }
        else {
          if(ca.firebase){
            this._updateKeyUIFirebase();
          }
          else {
            window.addEventListener("CeciDataConnectionLoaded", function(){
              self._updateKeyUIFirebase();
            });
          }
        }
      },
      _updateKeyUIFirebase : function(){

        //This builds the UI that lets you choose how each key in the data set is displayed!
        var self = this;

        document.querySelector("ceci-app").getFirebaseObject('form-data',"", function(data){

          // Clears out the old UI
          self.shadowRoot.querySelector("#keys").textContent = "";

          // Tries to grab the stored Data
          var db = data || {};
          self.storedData = db[self.dataname] || [];

          // Tries to grab it's own keyConfig (which tells it how to render each Key field)
          self.keyConfig = JSON.parse(self.listschema) || {};

          // Grabs the schema from the form
          var formSchema = db[self.dataname + "_formschema"] || {};

          // Builds a list of all the keys from the form and data set
          // To know what to display options for.
          var keylist = [];
          for (var i = 0; i < self.storedData.length; i++){
            var item = self.storedData[i];
            for (var key in item) {
              if(keylist.indexOf(key) < 0) {
                keylist.push(key);
              }
            }
          }

          for (var j = 0; j < formSchema.length; j++){
            var item = formSchema[j];
            if(keylist.indexOf(item["name"]) < 0 ){
              keylist.push(item["name"]);
            }
          }

          for (var k = 0; k < keylist.length; k++){
            var key = keylist[k];
            if(!self.keyConfig[key]) {
              self.keyConfig[key] = "text";
            }
          }

          // CLean up the keyConfig file
          // Removes everything in the keyConfig that isn't in the keylist anymore.
          for (var key in self.keyConfig){
            if(keylist.indexOf(key) < 0) {
              delete self.keyConfig[key];
            }
          }

          // We should also clean up the key config.
          // we should also get rid of keys that are no longer needed from keyConfig
          // Like if something is NOT in the keylist, then dump it

          // Have a way to choose how each key is displayed

          for (var j = 0; j < keylist.length; j ++){
            var keyConfig = document.createElement("div");
            keyConfig.classList.add("keyConfig");
            keyConfig.textContent = "Show <strong>" + keylist[j] + "</strong> as ";

            var select =  document.createElement("select");
            keyConfig.appendChild(select);

            select.setAttribute("key",keylist[j]);
            select.innerHTML = "<option value='text'>text</option><option value='image'>image</option><option value='hide'>hide</option>";
            select.value = self.keyConfig[keylist[j]];

            select.addEventListener("change",function(e){
              self.keyConfig[e.target.getAttribute("key")] = e.target.value;
              self.showData();
              self.listschema = JSON.stringify(self.keyConfig);
            });
            self.shadowRoot.querySelector("#keys").appendChild(keyConfig);
          }

          //Put the list schema into the db
          db[self.dataname + "_listSchema"] = self.keyConfig;
          document.querySelector("ceci-app").setFirebaseObject('form-data', db);
          self.showData();
        });
      },
      enteredView : function(){
        var self = this;

        //Listens to updates to the data set
        window.addEventListener('storage', this.showData.bind(this), false);
        window.addEventListener('storage', this.updateKeyUI.bind(this), false);
        window.addEventListener('formChange', this.updateKeyUI.bind(this), false);

        this.updateKeyUI();

        //Show exising data
        this.showData();
        this.super();
      },
      getOrWaitForCeciApp: function(callback){
        var ceciApp = document.querySelector("ceci-app");
        if(!ceciApp){
          window.addEventListener("CeciDataConnectionLoaded", function(){
            callback(document.querySelector("ceci-app"));
          });
        } else {
          if(ceciApp && ceciApp.firebase){
            callback(ceciApp);
          } else {
            window.addEventListener("CeciDataConnectionLoaded", function(){
              callback(document.querySelector("ceci-app"));
            });
          }
        }
      },
      showData: function(){
        var self = this;
        this.getOrWaitForCeciApp(function(ceciApp){
          var that = self;
          ceciApp.getFirebaseObject('form-data', "", function(data){
          var those = that;
          those.storedData = data || {};

          //handle case where dataview is just loading and listSchema hasn't been parsed and
          //stored in keyConfig
          if(those.keyConfig && Object.getOwnPropertyNames(those.keyConfig).length < 1){
            those.keyConfig = those.storedData[those.dataname+"_listSchema"];
          }

          var lastData;
          for (var i = 0; i < those.datascope.length; i++){
            var scopeItem = those.datascope[i];
            self.storedData = those.storedData[scopeItem["dataset"]][scopeItem["index"]];
            lastData = scopeItem["dataset"];
          }

          if (lastData == those.dataname){
            var blam = [];
            blam.push(those.storedData);
            those.storedData = blam;
          }
          else {
            those.storedData = those.storedData[those.dataname] || [];
          }

          var itemList = those.shadowRoot.querySelector("#items");
          itemList.innerHTML = "";

          for(var i = 0; i < those.storedData.length; i++){
            var item = those.storedData[i];
            var itemEl = document.createElement("div");
            itemEl.classList.add("dataGroup");

            for (var key in item) {
              var displayType = those.keyConfig[key];
              var dataItem;

              if (displayType == "text") {
                dataItem = document.createElement("div");

                if (typeof item[key] == "object"){
                  dataItem.textContent = "List of " + item[key].length + " " + key;
                }
                else {
                  dataItem.textContent = item[key];
                }
              }
              else if (displayType == "image") {
                dataItem = document.createElement("img");
                dataItem.setAttribute("src", item[key]);
              }
              else {
                dataItem = document.createElement("div");
              }

              dataItem.classList.add("dataItem");

              var these = those;
              dataItem.addEventListener("click",function(e){
                var nodeList = Array.prototype.slice.call(e.currentTarget.parentNode.parentNode.children);
                var index = nodeList.indexOf(e.currentTarget.parentNode);
                var sendScope = JSON.parse(JSON.stringify(that.datascope));
                var scopeItem = {};
                scopeItem["dataset"] = these.dataname;
                scopeItem["index"] = index;
                sendScope.push(scopeItem);
                these.broadcast('sendItem', sendScope);
              });

              if(displayType != "hide") {
                itemEl.appendChild(dataItem);
              }
            }

            if(self.showedit == "true"){
              var editItem = document.createElement("div");
              editItem.textContent = "Edit";
              editItem.classList.add("editItem");
              itemEl.appendChild(editItem);
              editItem.addEventListener("click",function(e){
                var nodeList = Array.prototype.slice.call(e.currentTarget.parentNode.parentNode.children);
                var index = nodeList.indexOf( e.currentTarget.parentNode );
                var sendScope = JSON.parse(JSON.stringify(that.datascope));
                var scopeItem = {};
                scopeItem["dataset"] = these.dataname;
                scopeItem["index"] = index;
                sendScope.push(scopeItem);
                these.broadcast('editItem', sendScope);
              });
            }

            if(these.showaddtoitem == "true"){
              var el = document.createElement("div");
              el.textContent = "Add to self";
              el.classList.add("addToItem");
              itemEl.appendChild(el);
              el.addEventListener("click",function(e){
                var nodeList = Array.prototype.slice.call(e.currentTarget.parentNode.parentNode.children);
                var index = nodeList.indexOf( e.currentTarget.parentNode );
                var sendScope = JSON.parse(JSON.stringify(that.datascope));
                var scopeItem = {};
                scopeItem["dataset"] = these.dataname;
                scopeItem["index"] = index;
                sendScope.push(scopeItem);
                these.broadcast('addToItem', sendScope);
              });
            }

            if(self.showdelete == "true"){
              var deleteItem = document.createElement("div");
              deleteItem.textContent = "X";
              deleteItem.classList.add("deleteItem");
              itemEl.appendChild(deleteItem);
              deleteItem.addEventListener("click",function(e){
                var nodeList = Array.prototype.slice.call(e.currentTarget.parentNode.parentNode.children);
                var index = nodeList.indexOf( e.currentTarget.parentNode );
                these.deleteItem(index);
              });
            }

            itemList.appendChild(itemEl);
          }
          });
        });
      }
    });
  </script>
</polymer-element>