feat: cad

.eslintignore

@@ -0,0 +1 @@
+public

.prettierrc

@@ -5,5 +5,6 @@
   "trailingComma": "es5",
   "printWidth": 100,
   "proseWrap": "never",
-  "vueIndentScriptAndStyle": true
+  "vueIndentScriptAndStyle": true,
+  "endOfLine": "auto"
 }

public/js/loadCAD.js

@@ -1,44 +1,43 @@
 window.grendCAD = (function grendCAD() {
-  let initFloor
-  let initScript
-  let initDOM
-  let point, dire
+  let initFloor;
+  let initScript;
+  let initDOM;
+  let point, dire;
 
   window.cad = {
-    setSign: function(p, d) {
-      point = p
-      dire = d
-    }
-  }
+    setSign: function (p, d) {
+      point = p;
+      dire = d;
+    },
+  };
 
   function loadScript(cb) {
-    if (initScript) return cb()
+    if (initScript) return cb();
 
-    let $script = document.createElement('script')
-    $script.src = '//www.4dmodel.com/CAD/bundle.js'
-    $script.onload = function() {
-      initScript = true
-      cb()
-    }
+    let $script = document.createElement('script');
+    $script.src = '//www.4dmodel.com/CAD/bundle.js';
+    $script.onload = function () {
+      initScript = true;
+      cb();
+    };
 
-    document.documentElement.appendChild($script)
+    document.documentElement.appendChild($script);
   }
 
   function loadDOM($parent) {
     if (initDOM) return initDOM;
-    let $layer = document.createElement('div')
-    let $cad = document.createElement('div')
-
-    $layer.className = 'cad'
-    $cad.id = 'cad'
-    $layer.appendChild($cad)
+    let $layer = document.createElement('div');
+    let $cad = document.createElement('div');
 
+    $layer.className = 'cad';
+    $cad.id = 'cad';
+    $layer.appendChild($cad);
 
-    let style = document.createElement('style')
+    let style = document.createElement('style');
     style.innerHTML = `
       .cad {
         position: absolute;
-        right: 80px;
+        right: 16px;
         top: 16px;
         width: 200px;
         height: 200px;
@@ -54,7 +53,6 @@ window.grendCAD = (function grendCAD() {
       @media only screen and (max-width: 600px) { 
         .cad {
             position: absolute;
-            left: 16px;
             top: 65px;
             width: 100px;
             height: 100px;
@@ -62,71 +60,90 @@ window.grendCAD = (function grendCAD() {
             border-radius: 5px;
         }
       }
-    `
+    `;
 
-    document.documentElement.appendChild(style)
-    document.documentElement.appendChild($layer)
-    $parent.appendChild(style)
-    $parent.appendChild($layer)
-    return $layer
+    document.documentElement.appendChild(style);
+    document.documentElement.appendChild($layer);
+    $parent.appendChild(style);
+    $parent.appendChild($layer);
+    return $layer;
   }
 
-
   function setStyle(signColor, borderColor, borderWidth) {
     cad.setDefaultPointStyle({
-      fillColor: "rgba(0,0,0,0)",
-      storkeColor: "rgba(0,0,0,0)"
+      fillColor: 'rgba(0,0,0,0)',
+      storkeColor: 'rgba(0,0,0,0)',
     });
 
-    console.log(borderWidth)
+    console.log(borderWidth);
     cad.setDefaultLineStyle({
       width: borderWidth,
-      color: borderColor
+      color: borderColor,
     });
 
     cad.setDefaultSignStyle({
-      color: signColor
-    })
+      color: signColor,
+    });
   }
 
-
-  return function(floor, $parent, signColor, borderColor, borderWidth) {
+  return function (floor, $parent, signColor, borderColor, borderWidth) {
     if (initFloor) {
-      console.log('cache')
-      return setStyle(signColor, borderColor, borderWidth)
+      console.log('cache');
+      return setStyle(signColor, borderColor, borderWidth);
     }
-    console.log('load')
-    initFloor = floor
+    console.log('load');
+    initFloor = floor;
 
-    loadScript(function() {
-      let $layer = loadDOM($parent)
+    loadScript(function () {
+      let $layer = loadDOM($parent);
 
-      $layer.style.visibility = 'hidden'
+      $layer.style.visibility = 'hidden';
       window.cad = structureCAD({
         data: {
-            block: [],
-            column: [],
-            door: [],
-            hole: [],
-            segment: [],
-            "vertex-xy": [],
-            "vertex-z": [],
-        }, 
+          block: [],
+          column: [],
+          door: [],
+          hole: [],
+          segment: [],
+          'vertex-xy': [],
+          'vertex-z': [],
+        },
         layer: $layer.querySelector('#cad'),
-        edit: false
+        edit: false,
       });
-      
-      setStyle(signColor, borderColor, borderWidth)
-      cad.hideDire()
-      cad.hideGauge()
-  
-      console.log('loadData')
+
+      setStyle(signColor, borderColor, borderWidth);
+      cad.hideDire();
+      cad.hideGauge();
+
+      console.log('loadData');
       cad.loadData(initFloor);
       if (point && dire) {
-        window.cad.setSign(point, dire)
+        window.cad.setSign(point, dire);
       }
-      $layer.style.visibility = 'visible'
-    })
-
-  }
-})();
+      $layer.style.visibility = 'visible';
+    });
+  };
+})();
+
+$.ajax({
+  url: g_Prefix + 'data/' + window.number + '/someData.json' + '?' + Date.now(),
+  method: 'GET',
+  success(data) {
+    if (!data.showCad) return;
+
+    $.ajax({
+      url: '//super.4dage.com/data/' + window.number + '/floor.json',
+      method: 'GET',
+      success(res) {
+        grendCAD(
+          res,
+          document.querySelector('body'),
+          data.cadSignColor,
+          data.cadBorderColor,
+          data.cadBorderWidth
+        );
+      },
+    });
+  },
+});