active_designer 0.0.0

data/lib/active_designer/public/js/schema/add-column.js

@@ -0,0 +1,82 @@
+function editColumnName(){
+  $('body').unbind('click')
+  $('.column-title').click(function() {
+    if (openEditChecker()) { return }
+    $(this).popover('hide');
+    this.outerHTML = "<form><input class='column-form' type='text' name='tableName' value='" + this.innerText + "'></form>";
+    enterKeypressColumn()
+    clickOutsideColumnKeypress()
+  });
+}
+
+function enterKeypressColumn() {
+  $('.column-form').keypress(function (e) {
+    var key = e.which;
+    if(key == 13) {
+      updateColumnName()
+      return false;
+    }
+  });
+}
+
+function updateColumnName() {
+  let columnName = $('.column-form')[0].value;
+  $('.column-form')[0].parentElement.outerHTML =
+  "<span class='column-title' data-toggle='popover' data-trigger='hover' data-content='Edit column name'>" + columnName.toLowerCase() + "</span>"
+  $('[data-toggle="popover"]').popover()
+  editColumnName()
+}
+
+function clickOutsideColumnKeypress() {
+  $('body').click(function() {
+    if($(event.target).is('span.column-title')) { return }
+    if(!$(event.target).is('.column-form')) {
+      updateColumnName()
+    }
+  });
+}
+
+function editTypeName(columnType){
+  $('.tag-pill').click(function() {
+    if ($('input').length === 0) {
+      $(this).popover('hide');
+      $('body').append(
+        "<form><input class='type-form' type='hidden' value='placeholder'></form>"
+      )
+      this.outerHTML =
+      "<div class='dropdown open float-xs-left'>" +
+        "<div class='btn btn-default btn-xs dropdown-toggle' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" +
+          columnType +
+        "</div>" +
+        "<div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>" +
+          "<div class='dropdown-item'>integer</div>" +
+          "<div class='dropdown-item'>decimal</div>" +
+          "<div class='dropdown-item'>text</div>" +
+          "<div class='dropdown-item'>ref</div>" +
+        "</div>" +
+      "</div>"
+      setTimeout(cont,10)
+      function cont() {
+        $("#dropdownMenuButton").dropdown("toggle")
+      }
+      $('.dropdown-item').click(function() {
+        let typeName = this.innerText;
+        this.parentElement.parentElement.outerHTML =
+        "<span class='tag tag-default tag-pill float-xs-left' data-toggle='popover' data-trigger='hover' data-content='Edit type'>" + typeName + "</span>"
+        $('[data-toggle="popover"]').popover()
+        $('input')[0].outerHTML = ""
+        editTypeName(columnType)
+      });
+    }
+  });
+}
+
+function columnHTML(columnObj,deleteClass) {
+  return `<li class='list-group-item' id='${columnObj.id}'>` +
+    `<span class='tag tag-default float-xs-left type-span' >${columnObj.type}</span>` +
+    "<div class='column-title-outer' >" +
+      `<span class='column-title'>${columnObj.name}</span>` +
+    "</div>" +
+    `<i class='fa fa-trash ${deleteClass}' data-toggle='popover' data-trigger='hover' data-content='Destroy column'></i>` +
+  "</li>"
+}

data/lib/active_designer/public/js/schema/edit-checker.js

@@ -0,0 +1,14 @@
+function getSchema() {
+  return JSON.parse(localStorage.getItem('schema'));
+}
+
+function setSchema(schema) {
+  localStorage.setItem("schema",JSON.stringify(schema));
+}
+
+let newTableID = 301;
+
+function openEditChecker() {
+  if ($('input').length > 0) { return true };
+  return false;
+}

data/lib/active_designer/public/js/schema/edit-table-name.js

@@ -0,0 +1,77 @@
+function editTableName(){
+  $('body').unbind('click');
+  $('.table-title').on('dblclick',null,null,setupTableNameForm);
+}
+
+function setupTableNameForm(event) {
+  if (openEditChecker()) { return };
+  let originalTitle = this.innerText;
+  $(this).popover('hide');
+  let cardID = $(this).parents('.card')[0].id;
+  this.outerHTML = tableTitleFormHTML(this.innerText);
+  addEditTableNameListeners(originalTitle, cardID);
+}
+
+function addEditTableNameListeners(originalTitle, cardID) {
+  $('.table-form').on('keypress', null, { originalTitle: originalTitle,
+    cardID: cardID
+  }, titleKeypressListener);
+  $('body').on('click', null, { originalTitle: originalTitle,
+    cardID: cardID,
+    count: 0
+  }, titleBodyClickListener);
+}
+
+function titleKeypressListener(e) {
+  var key = e.which;
+  if(key == 13) {
+    titleUpdate(e)
+    return false;
+  }
+}
+
+function titleBodyClickListener(e) {
+  if(!$(event.target).is('.table-form') && e.data.count >= 1 ) {
+    titleUpdate(e);
+  }
+  e.data.count++;
+}
+
+function titleUpdate(e) {
+  let schema = getSchema();
+  let tableName = $('.table-form')[0].value;
+  $('.table-form')[0].parentElement.outerHTML = tableTitleHTML(tableName);
+  $('[data-toggle="popover"]').popover();
+  if (e.data.originalTitle !== tableName) {
+    let cardID = e.data.cardID;
+    schema[cardID].name = tableName;
+    checkTitleStatus(cardID,schema);
+  }
+  editTableName();
+  setSchema(schema);
+}
+
+function tableTitleHTML(tableName) {
+  return "<h4 class='card-title table-title' data-toggle='popover' data-trigger='hover' data-content='Edit table name'>" +
+    tableName +
+  "</h4>";
+}
+
+function tableTitleFormHTML(priorText) {
+  return `<form><input class='table-form' type='text' name='tableName' value='${priorText}'></form>`;
+}
+
+function checkTitleStatus(cardID,schema) {
+
+  if (schema[cardID].status.new === false) {
+    updateTitleStatus(cardID,schema);
+  }
+}
+
+function updateTitleStatus(cardID,schema) {
+  if (schema[cardID].name === schema[cardID].original_name) {
+    schema[cardID].status.modified = false;
+  } else {
+    schema[cardID].status.modified = true;
+  }
+}

data/lib/active_designer/public/js/schema/jsPlumb.js

@@ -0,0 +1,70 @@
+let zoom = .7;
+
+let connections = {}
+
+let j = jsPlumb.getInstance({
+  Container:"foo"
+});
+
+jsPlumb.ready(function() {
+  let canvasLeft = 0
+  let canvasTop = 0
+
+  window.setZoom = function(zoom, instance, transformOrigin, el) {
+    transformOrigin = transformOrigin || [ 0.5, 0.5 ];
+    instance = instance || jsPlumb;
+    el = el || instance.getContainer();
+    var p = [ "webkit", "moz", "ms", "o" ],
+        s = "scale(" + zoom + ")",
+        oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
+
+    for (var i = 0; i < p.length; i++) {
+      el.style[p[i] + "Transform"] = s;
+      el.style[p[i] + "TransformOrigin"] = oString;
+    }
+
+    el.style["transform"] = s;
+    el.style["transformOrigin"] = oString;
+
+    instance.setZoom(zoom);
+  };
+
+  $('#zoom-in').click(function() {
+    if (zoom > .4) {
+      let position = $('.slider').position().left + 10
+      $('.slider').css({left: position})
+      zoom = zoom - .05
+      window.setZoom(zoom,null,null,$('#foo')[0])
+    }
+  })
+
+  $('#zoom-out').click(function() {
+    if (zoom < 1) {
+      let position = $('.slider').position().left - 10;
+      $('.slider').css({left: position});
+      zoom = zoom + .05;
+      window.setZoom(zoom,null,null,$('#foo')[0]);
+    }
+  })
+});
+
+function setCardDraggable(card) {
+  jsPlumb.draggable(card, {filter:':not(.fa-arrows)'});
+}
+
+function createConnector(source,target,tableID) {
+  let conn = jsPlumb.connect({
+    source:source,
+    target:target,
+    anchors:[["Continuous", { faces: ["left", "right"] }],["Continuous", { faces: ["left", "right"] }]],
+    endpoint:["Dot", { radius: 2}],
+    paintStyle: { strokeWidth:5, stroke:'#D9D9DA' },
+    detachable: false,
+    maxConnections:-1
+  });
+  if (connections[tableID]) {
+    connections[tableID].push(conn)
+  } else {
+    connections[tableID] = [conn]
+  }
+}

data/lib/active_designer/public/js/schema/listeners.js

@@ -0,0 +1,265 @@
+
+function destroyTable(){
+  if (openEditChecker()) { return };
+  $('.delete-table').unbind('click');
+  $('.delete-table').click(function() {
+    $(this).popover('dispose');
+    let card = $(this).parents('.card');
+    let listItems = card.find('.list-group-item');
+    for(let i = 0; i < listItems.length; i++) {
+      jsPlumb.remove(listItems[i]);
+    };
+    card[0].outerHTML = "";
+  });
+}
+
+function destroyColumn() {
+  let schema = getSchema();
+  if (openEditChecker()) { return }
+  $('.delete-column').unbind('click')
+  $('.delete-column').click(function() {
+    $(this).popover('dispose');
+    let column = $(this).parents('.list-group-item')[0];
+    let columnID = column.id;
+    column.outerHTML = "";
+    let tableID = `tbl-${columnID.split('-')[1]}`;
+    let conns = connections[tableID];
+    if (typeof(conns) !== "undefined") {
+      for(let i = 0; i < conns.length; i++) {
+        jsPlumb.repaintEverything()
+        jsPlumb.repaint(conns[i].source)
+      }
+    }
+    let columns = schema[tableID].columns
+    let status = columns[columnID].status;
+    if (status.new) {
+      columns[columnID] = undefined;
+    } else {
+      status.deleted = true
+    }
+  });
+  setSchema(schema);
+}
+
+function destroyReference() {
+  if (openEditChecker()) { return };
+  let schema = getSchema();
+  $('.delete-ref').unbind('click')
+  $('.delete-ref').click(function() {
+    $(this).popover('dispose');
+    let reference = $(this).parents('.list-group-item')[0];
+    let referenceID = reference.id;
+    let tableID = `tbl-${referenceID.split('-')[1]}`;
+    jsPlumb.remove(reference);
+    let conns = connections[tableID];
+    for(let i = 0; i < conns.length; i++) {
+      if (conns[i].source) {
+        jsPlumb.repaintEverything()
+        jsPlumb.repaint(conns[i].source)
+      }
+    }
+    let references = schema[tableID].references
+    let status = references[referenceID].status;
+    if (status.new) {
+      references[referenceID] = undefined;
+    } else {
+      status.deleted = true
+    }
+  });
+  setSchema(schema);
+}
+
+function newColumnObj(tableID, columnName, columnType, schema) {
+  let tableNum = tableID.split('-')[1];
+  let prevID = 100;
+  let columnIDs = Object.keys(schema[`tbl-${tableNum}`].columns);
+  if (columnIDs.length !== 0) {
+    prevID = parseInt(columnIDs[columnIDs.length -1].split('-')[2]);
+  }
+  let columnID = `col-${tableNum}-${prevID + 1}`;
+  return schema[tableID].columns[columnID] = {
+    name: columnName,
+    original_name: null,
+    type: columnType,
+    original_type: null,
+    id: columnID,
+    status: { original: false, modified: false, new: true }
+  }
+}
+
+function newRefObj(tableID,foreignTableName,foreignTableID, schema)  {
+  let tableNum = tableID.split('-')[1];
+  let prevID = 100;
+  let columnIDs = Object.keys(schema[`tbl-${tableNum}`].references);
+  if (columnIDs.length !== 0) {
+    prevID = parseInt(columnIDs[columnIDs.length -1].split('-')[2]);
+  }
+  let columnID = `col-${tableNum}-${prevID + 1}`;
+  return schema[tableID].references[columnID] = {
+    id: columnID,
+    table_id: tableID,
+    foreign_table_name: foreignTableName,
+    foreign_table_id: foreignTableID,
+    status: { original: false, new: true, deleted: false}
+  }
+}
+
+function addColumn() {
+  if (openEditChecker()) { return };
+  $('.fa-plus-square').unbind('click');
+  $('.fa-plus-square').on('click', null, {}, displayColumnJumbo);
+}
+
+function displayColumnJumbo() {
+  $('body').append(addColumnCardHTML());
+  let card = $(this).parents('.card');
+  $('#column-reference').change(function(){
+    if (this.checked) {
+      $('.add-column-card').find('.column-html').addClass('hidden')
+      $('.add-column-card').find('.reference-html').removeClass('hidden')
+    } else if (!this.checked) {
+      $('.add-column-card').find('.reference-html').addClass('hidden')
+      $('.add-column-card').find('.column-html').removeClass('hidden')
+    }
+  });
+
+  $('.add-column-card .fa-times').click(function() {
+    $('.add-column-card')[0].outerHTML = ""
+  });
+
+  $('form button').click(function() {
+    let schema = getSchema();
+    let referenceChecked = $('form input#column-reference')[0].checked
+    if (referenceChecked) {
+      let foreignTableName = $('form input#foreign-table-name').val()
+      let cardIDs = Object.keys(schema)
+      for(let i = 0; i < cardIDs.length; i++) {
+        if (schema[cardIDs[i]].name === foreignTableName) {
+          let referenceRelationship = $('input[name="ref-rel"]:checked').val()
+          let foreignTableHTML = $(`#${cardIDs[i]}`);
+
+          let prevRefs = schema[card[0].id].references
+          let prevRefKeys = Object.keys(prevRefs)
+          let prevStatus = false
+          for(let i = 0; i < prevRefKeys.length; i++) {
+            if (prevRefs[prevRefKeys[i]].foreign_table_name === foreignTableName) {
+              prevStatus = true
+            }
+          }
+          if (!prevStatus) {
+            let foreignKeyHTML = foreignTableHTML.find(`#${foreignTableHTML[0].id}-id-column`);
+            let listGroup = card.find('.list-group');
+            let refObj = newRefObj(card[0].id, foreignTableName, foreignTableHTML[0].id, schema);
+            listGroup.append(columnHTML({id: refObj.id, type: "integer", name: `${foreignTableName}_id`},"delete-ref"));
+            let newColumnHTML = $(`#${refObj.id}`)[0]
+            createConnector(newColumnHTML,foreignKeyHTML);
+          }
+          else {
+            console.log("already happend")
+          }
+        }
+      }
+    } else {
+      let columnName = $('form input#column-name').val()
+      let columnType = $('form select#column-type-select').val()
+      let listGroup = card.find('.list-group');
+      let columnObj = newColumnObj(card[0].id, columnName, columnType, schema)
+      listGroup.append(columnHTML(columnObj, "delete-column"));
+    }
+    setSchema(schema);
+    $('.add-column-card')[0].outerHTML = ""
+    destroyColumn()
+    destroyReference()
+    return false
+  })
+
+  $('[data-toggle="popover"]').popover();
+}
+
+function addColumnCardHTML() {
+  return "<div class='card add-column-card'>" +
+    "<div class='card-header'>" +
+      "<h4 class='card-title'>Enter Column Information</h4>" +
+      "<i class='fa fa-times' aria-hidden='true'></i>" +
+    "</div>" +
+    "<div class='card-block'>" +
+    "<form>" +
+      "<div class='ref-check'>" +
+        "<label class='ref-check-label'>" +
+          "<input class='ref-check-input' type='checkbox' id='column-reference' value='reference' > reference" +
+        "</label>" +
+      "</div>" +
+      datatypeSelectoHTML() +
+      foreignTableRadioButtonHTML() +
+      "<div class='form-group'>" +
+        "<button type='submit' class='btn btn-primary'>Submit</button>" +
+      "</div>" +
+    "</form>" +
+  "</div>" +
+  "</div>"
+}
+
+
+function foreignTableRadioButtonHTML() {
+  return "<div class='reference-html hidden'>" +
+    "<div class='form-group'>" +
+      "<input type='text' class='form-control' id='foreign-table-name' placeholder='foreign table name'>" +
+    "</div>" +
+    "<div class='form-check'>" +
+      "<label class='form-check-label'>" +
+        "<input class='form-check-input' type='radio' name='ref-rel' id='ref-rel-mto' value='mto'>" +
+        " Many to one reference" +
+      "</label>" +
+    "</div>" +
+    "<div class='form-check'>" +
+      "<label class='form-check-label'>" +
+        "<input class='form-check-input' type='radio' name='ref-rel' id='ref-rel-mto' value='mtm'>" +
+        " Many to many reference" +
+      "</label>" +
+    "</div>" +
+  "</div>"
+}
+
+function datatypeSelectoHTML() {
+  return "<div class='column-html'>" +
+    "<div class='form-group'>" +
+      "<input type='text' class='form-control' id='column-name' placeholder='column name'>" +
+    "</div>" +
+    "<div class='form-group'>" +
+      "<label for='column-type-select'>Column Type</label>" +
+      "<select id='column-type-select'>" +
+        "<option selected>select</option>" +
+        "<option value='character'>CHARACTER(n)</option>" +
+        "<option value='varchar'>VARCHAR(n)</option>" +
+        "<option value='binary'>BINARY(n)</option>" +
+        "<option value='boolean'>BOOLEAN</option>" +
+        "<option value='varbinary'>VARBINARY(n)</option>" +
+        "<option value='integer-precision'>INTEGER(p)</option>" +
+        "<option value='smallint'>SMALLINT</option>" +
+        "<option value='integer'>INTEGER</option>" +
+        "<option value='bigint'>BIGINT</option>" +
+        "<option value='decimal'>DECIMAL(p,s)</option>" +
+        "<option value='numeric'>NUMERIC(p,s)</option>" +
+        "<option value='float'>FLOAT(p)</option>" +
+        "<option value='real'>REAL</option>" +
+        "<option value='float'>FLOAT</option>" +
+        "<option value='date'>DATE</option>" +
+        "<option value='time'>TIME</option>" +
+        "<option value='timestamp'>TIMESTAMP</option>" +
+        "<option value='interval'>INTERVAL</option>" +
+        "<option value='array'>ARRAY</option>" +
+        "<option value='multiset'>MULTISET</option>" +
+        "<option value='xml'>XML</option>" +
+      "</select>" +
+    "</div>" +
+  "</div>"
+}
+
+function addListeners(){
+  destroyTable()
+  editTableName()
+  addColumn()
+  destroyColumn()
+  destroyReference()
+  $('[data-toggle="popover"]').popover()
+}

data/lib/active_designer/public/js/schema/main.js

@@ -0,0 +1,72 @@
+$(document).ready(function() {
+
+  function createSchemaFromParams() {
+    setCardDraggable($('.card'));
+    window.setZoom(zoom,null,null,$('#foo')[0]);
+    addReferences();
+    addListeners();
+  }
+
+  function addReferences() {
+    let schema = getSchema();
+    let refs = $("li[id^='ref-']");
+    for(let i = 0; i < refs.length; i++) {
+      let referenceID = refs[i].id;
+      let tableIDNum = referenceID.split('-')[1];
+      let tableID = `tbl-${tableIDNum}`;
+      let tableObj = schema[tableID];
+      let refObj = tableObj.references[referenceID];
+      let foreignTableID = refObj.foreign_table_id;
+      let foreignTableIDEl = $(`#${foreignTableID}-id-column`)[0];
+      let refEl = refs[i];
+      createConnector(refEl,foreignTableIDEl,tableID);
+    }
+    setSchema(schema);
+  }
+
+  function addTableByClick(tableName) {
+    zoom = 1;
+    window.setZoom(zoom,null,null,$('#foo')[0]);
+    $('.slider').css({left: 5});
+    $('.canvasBorder').click(function(event) {
+      $('.canvasBorder').unbind('click');
+      let coords = findTargetCoord();
+      $('.jsPlumbBoundary').append(tableHTML(tableName,coords.x,coords.y));
+      setCursorAfterBoundaryClick();
+      setCardDraggable($(`#tbl-${newTableID}`));
+      addListeners();
+      addEmptyTableToSchema();
+      newTableID += 1;
+    });
+  }
+
+  function findTargetCoord() {
+    let target = $(event.target)
+    let offset = target.position()
+    return { x: event.clientX - offset.left,
+             y: event.clientY - offset.top}
+  }
+
+  $('.fa-plus-square-o').click(function(){
+    if (openEditChecker()) { return }
+    setCursorBeforeBoundaryClick()
+    addTableByClick("table_name")
+  })
+
+  function addEmptyTableToSchema() {
+    tableID = `tbl-${newTableID}`;
+    let schema = getSchema();
+    schema[tableID] = {
+      name: "table_name",
+      original_name: null,
+      columns: {},
+      references: {},
+      status: { original: false, modified: false, new: true, deleted: false },
+      id: tableID
+    };
+    setSchema(schema);
+  }
+
+  createSchemaFromParams()
+
+});

data/lib/active_designer/public/js/schema/mouse-controls.js

@@ -0,0 +1,15 @@
+function setCursorBeforeBoundaryClick() {
+  $('.navbar').css({cursor: 'not-allowed'})
+  $('body').css({cursor: 'not-allowed'})
+  $('.btn').css({cursor: 'not-allowed'})
+  $('.fa').css({cursor: 'not-allowed'})
+  $('.jsPlumbBoundary').css({cursor: 'crosshair'})
+}
+
+function setCursorAfterBoundaryClick() {
+  $('.navbar').css({cursor: 'auto'})
+  $('body').css({cursor: 'auto'})
+  $('.btn').css({cursor: 'auto'})
+  $('.fa').css({cursor: 'auto'})
+  $('.jsPlumbBoundary').css({cursor: 'auto'})
+}

data/lib/active_designer/public/js/schema/table-html.js

@@ -0,0 +1,24 @@
+function tableHTML(tableName,tableX,tableY) {
+  return `<div class='card' id='tbl-${newTableID}' style='top:${tableY}px;left:${tableX}px;'>` +
+    "<div class='card-header'>" +
+      '<i class="fa fa-arrows" aria-hidden="true"></i>' +
+      "<h4 class='card-title table-title' data-toggle='popover' data-trigger='hover' data-content='Edit table name'>" +
+        `${tableName}` +
+      "</h4>" +
+      "<div class='table-nav-buttons'>" +
+        "<i class='fa fa-plus-square' data-toggle='popover' data-trigger='hover' data-content='Add column'></i>" +
+        "<i class='fa fa-trash' data-toggle='popover' data-trigger='hover' data-content='Destroy table'></i>" +
+      "</div>" +
+    "</div>" +
+    "<div class='card-block'>" +
+      "<ul class='list-group'>" +
+        "<li class='list-group-item' >" +
+          "<span class='tag tag-default float-xs-left type-span'>integer</span>" +
+          "<div class='column-title-outer' >" +
+            "<span class='column-title' >id</span>" +
+          "</div>" +
+        "</li>" +
+      "</ul>" +
+    "</div>" +
+  "</div>"
+};