npm - model-manager - Versions diffs - 0.0.3-1.0 - Mend

model-manager 0.0.3-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/administration/insert.js +179 -0
package/administration/insert_one.js +33 -0
package/administration/test_data.js +46 -0
package/administration.html +149 -0
package/assets/css/admin.css +247 -0
package/assets/css/basic.css +474 -0
package/assets/css/checkout.css +517 -0
package/assets/css/dialog.css +158 -0
package/assets/css/dialog_admin.css +73 -0
package/assets/css/dialog_checkout.css +177 -0
package/assets/css/info.css +10 -0
package/assets/logo.png +0 -0
package/assets/partnerart.png +0 -0
package/assets/spinner.gif +0 -0
package/assets/spinner_2.gif +0 -0
package/assets/three/GLTFLoader.js +4448 -0
package/assets/three/ModelLoader.js +58 -0
package/assets/three/OrbitControls.js +1252 -0
package/assets/three/three.js +36819 -0
package/assets/three/three.module.js +50708 -0
package/assets/white/add_white_24dp.svg +1 -0
package/assets/white/admin/check.svg +1 -0
package/assets/white/admin/person_add_FILL0_wght400_GRAD0_opsz48.svg +1 -0
package/assets/white/admin/person_remove_FILL0_wght400_GRAD0_opsz48.svg +1 -0
package/assets/white/admin.svg +1 -0
package/assets/white/arrow_forward.svg +1 -0
package/assets/white/brush_white_24dp.svg +1 -0
package/assets/white/close_white_24dp.svg +1 -0
package/assets/white/code_white_24dp.svg +1 -0
package/assets/white/dashboard_white_24dp.svg +1 -0
package/assets/white/done_white_24dp.svg +1 -0
package/assets/white/emoji_people_white_24dp.svg +1 -0
package/assets/white/filter_list_white_24dp.svg +1 -0
package/assets/white/info_white_24dp.svg +1 -0
package/assets/white/minimize_white_24dp.svg +1 -0
package/assets/white/receipt_white_24dp.svg +1 -0
package/assets/white/rocket_launch_white_24dp.svg +1 -0
package/assets/white/search_black_24dp.svg +1 -0
package/assets/white/search_white_24dp.svg +1 -0
package/assets/white/settings_white_24dp.svg +1 -0
package/assets/white/shopping_cart_white_24dp.svg +1 -0
package/assets/white/store_white_24dp.svg +1 -0
package/assets/white/timeline_white_24dp.svg +1 -0
package/assets/white/view_in_ar_white_24dp.svg +1 -0
package/checkout.html +132 -0
package/checkout_admin.html +141 -0
package/icon.png +0 -0
package/imgs/armchair.png +0 -0
package/imgs/arrow_tnt.png +0 -0
package/imgs/bed_wnm.png +0 -0
package/imgs/big_bed.png +0 -0
package/imgs/birdscythe.png +0 -0
package/imgs/blue_tnt.png +0 -0
package/imgs/bull.png +0 -0
package/imgs/carpet.png +0 -0
package/imgs/chest.png +0 -0
package/imgs/coin_stash.png +0 -0
package/imgs/creeper_tnt.png +0 -0
package/imgs/garbage_can.png +0 -0
package/imgs/generator.png +0 -0
package/imgs/golden_sword.png +0 -0
package/imgs/highbed.png +0 -0
package/imgs/jetpack1.png +0 -0
package/imgs/jetpack2.png +0 -0
package/imgs/jetpack3.png +0 -0
package/imgs/jetpack4.png +0 -0
package/imgs/jetpack5.png +0 -0
package/imgs/jetpack6.png +0 -0
package/imgs/karmincross.png +0 -0
package/imgs/light_tnt.png +0 -0
package/imgs/lucky_block.png +0 -0
package/imgs/lucky_block_2.png +0 -0
package/imgs/mega_tnt.png +0 -0
package/imgs/modern_lamp.png +0 -0
package/imgs/multiply_tnt.png +0 -0
package/imgs/nuke.png +0 -0
package/imgs/oak_tree.png +0 -0
package/imgs/oak_tree_2.png +0 -0
package/imgs/old_globe.png +0 -0
package/imgs/scificannon_1.png +0 -0
package/imgs/scificannon_10.png +0 -0
package/imgs/scificannon_11.png +0 -0
package/imgs/scificannon_12.png +0 -0
package/imgs/scificannon_13.png +0 -0
package/imgs/scificannon_14.png +0 -0
package/imgs/scificannon_2.png +0 -0
package/imgs/scificannon_3.png +0 -0
package/imgs/scificannon_4.png +0 -0
package/imgs/scificannon_5.png +0 -0
package/imgs/scificannon_6.png +0 -0
package/imgs/scificannon_7.png +0 -0
package/imgs/scificannon_8.png +0 -0
package/imgs/scificannon_9.png +0 -0
package/imgs/simple_chair.png +0 -0
package/imgs/small_car.png +0 -0
package/imgs/small_modern_lamp.png +0 -0
package/imgs/small_wardrobe.png +0 -0
package/imgs/small_wooden_table.png +0 -0
package/imgs/spike_sword.png +0 -0
package/imgs/stone_holder.png +0 -0
package/imgs/stone_sword.png +0 -0
package/imgs/street_lamp.png +0 -0
package/imgs/sword_1.png +0 -0
package/imgs/sword_with_hole.png +0 -0
package/imgs/testing.png +0 -0
package/imgs/timer_tnt.png +0 -0
package/imgs/tiny_tnt.png +0 -0
package/imgs/tnt_cannon.png +0 -0
package/imgs/wing_tnt.png +0 -0
package/imgs/wooden_stool.png +0 -0
package/imgs/wooden_wardrobe.png +0 -0
package/index.html +179 -0
package/index_admin.html +189 -0
package/js/db/push_model.js +30 -0
package/js/dialoges.js +23 -0
package/js/item_functionality.js +7 -0
package/js/load_admin.js +32 -0
package/js/load_cart.js +76 -0
package/js/load_items.js +467 -0
package/js/update.js +35 -0
package/login.html +287 -0
package/main.js +306 -0
package/models/armchair.gltf +1 -0
package/models/arrow_tnt.gltf +1 -0
package/models/bedwnm.gltf +1 -0
package/models/big_bed.gltf +1 -0
package/models/birdscythe.gltf +1 -0
package/models/blue_tnt.gltf +1 -0
package/models/bull.gltf +1 -0
package/models/carpet.gltf +1 -0
package/models/chest.gltf +1 -0
package/models/coin_stash.gltf +1 -0
package/models/creeper_tnt.gltf +1 -0
package/models/garbage_can.gltf +1 -0
package/models/generator.gltf +1 -0
package/models/golden_sword.gltf +1 -0
package/models/highbed.gltf +1 -0
package/models/jetpack1.gltf +1 -0
package/models/jetpack2.gltf +1 -0
package/models/jetpack3.gltf +1 -0
package/models/jetpack4.gltf +1 -0
package/models/jetpack5.gltf +1 -0
package/models/jetpack6.gltf +1 -0
package/models/karmincross.gltf +1 -0
package/models/light_tnt.gltf +1 -0
package/models/lucky_block.gltf +1 -0
package/models/lucky_block_2.gltf +1 -0
package/models/mega_tnt.gltf +1 -0
package/models/modern_lamp.gltf +1 -0
package/models/multiply_tnt.gltf +1 -0
package/models/nuke.gltf +1 -0
package/models/oak_tree.gltf +1 -0
package/models/oak_tree_2.gltf +1 -0
package/models/old globe.gltf +1 -0
package/models/scificannon_1.gltf +1 -0
package/models/scificannon_10.gltf +1 -0
package/models/scificannon_11.gltf +1 -0
package/models/scificannon_12.gltf +1 -0
package/models/scificannon_13.gltf +1 -0
package/models/scificannon_14.gltf +1 -0
package/models/scificannon_2.gltf +1 -0
package/models/scificannon_3.gltf +1 -0
package/models/scificannon_4.gltf +1 -0
package/models/scificannon_5.gltf +1 -0
package/models/scificannon_6.gltf +1 -0
package/models/scificannon_7.gltf +1 -0
package/models/scificannon_8.gltf +1 -0
package/models/scificannon_9.gltf +1 -0
package/models/simple_chair.gltf +1 -0
package/models/small_car.gltf +1 -0
package/models/small_modern_lamp.gltf +1 -0
package/models/small_wardrobe.gltf +1 -0
package/models/small_wooden_table.gltf +1 -0
package/models/spike_sword.gltf +1 -0
package/models/stone_holder.gltf +1 -0
package/models/stone_sword.gltf +1 -0
package/models/street_lamp.gltf +1 -0
package/models/sword_1.gltf +1 -0
package/models/sword_with_hole.gltf +1 -0
package/models/timer_tnt.gltf +1 -0
package/models/tiny_tnt.gltf +1 -0
package/models/tnt_cannon.gltf +1 -0
package/models/wing_tnt.gltf +1 -0
package/models/wooden_stool.gltf +1 -0
package/models/wooden_wardrobe.gltf +1 -0
package/package.json +42 -0
package/preload.js +26 -0

package/index.html ADDED Viewed

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+    <link href="./assets/css/basic.css" rel="stylesheet">
+    <link href="./assets/css/dialog.css" rel="stylesheet">
+    <title>Browse</title>
+  </head>
+  <body>
+    <section id="head">
+      <div class="drag-field-head">
+        <p class="drag-field-text">ModelManager</p>
+      </div>
+      <div class="win-btn">
+        <a class="btn-win" id="close-button">
+          <img src="assets/white/close_white_24dp.svg" style="display: flex;">
+        </a>
+      </div>
+    </section>
+    <section id="sidebar">
+      <section class="title-container">
+        <img src="assets/logo.png" width="70px" alt="logo">
+      </section>
+      <section class="links-container">
+        <div class="links active">
+          <div class="icon">
+            <img src="assets/white/store_white_24dp.svg">
+          </div>
+          <span>Browse</span>
+        </div>
+        <div class="links" id="checkout-side">
+          <div class="icon">
+            <img src="assets/white/receipt_white_24dp.svg">
+          </div>
+          <span class="underline-hovered">Checkout</span>
+        </div>
+      </section>
+    </section>
+    <section id="main-content">
+      <div id="loading">
+        <h3 id="loading-text">loading...</h3>
+        <img id="loading-image" src="assets/spinner.gif" alt="Loading..." width="70px"/>
+      </div>
+      <section id="top-section">
+        <div class="input-box" >
+          <div class="input-icon">
+            <img src="assets/white/search_white_24dp.svg">
+          </div>
+          <input placeholder="Search..." data-search>
+        </div>
+        <!-- THIS NEEDS TO BE IMPLEMENTED -->
+        <!-- <div class="action-icons">
+          <div class="action-icon-one">
+            <img class="action-icons" src="assets/white/filter_list_white_24dp.svg" width="25px">
+          </div>
+        </div> -->
+      </section>
+      <h3 class="result-headline">Results: </h3>
+      <!-- All items listed in here -->
+      <section id="items">
+        <template data-item-template>
+          <div class="grid-item" id="template">
+            <div class="grid-picture">
+              <img src="assets/testing.png" width="190px">
+            </div>
+            <h4 class="grid-label">Testmodel</h4>
+            <div class="grid-blur"></div>
+            <div class="grid-data">
+              <div class="grid-textures">
+                <span data-tooltip="Textures" data-flow="bottom">
+                  <img src="assets/white/brush_white_24dp.svg">
+                </span>
+              </div>
+              <div class="grid-anims">
+                <span data-tooltip="Animations" data-flow="bottom">
+                  <img src="assets/white/emoji_people_white_24dp.svg">
+                </span>
+              </div>
+              <div class="grid-behavior">
+                <span data-tooltip="Behavior" data-flow="bottom">
+                  <img src="assets/white/code_white_24dp.svg">
+                </span>
+              </div>
+              <div class="grid-view-vr">
+                <span data-tooltip="3D View" data-flow="bottom" id="">
+                  <img src="assets/white/view_in_ar_white_24dp.svg">
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </section>
+    </section>
+    <!--transition-->
+    <main id="swup" class="transition-fade">
+      <h1>Cart</h1>
+    </main>
+    <!--Renderer-->
+    <div id="body-overlay"></div>
+    <div class="dialog" id="item-dialog">
+      <a href="#" role="button" class="dialog-close-button" id="dialog-close-button">
+        <image src="assets/white/close_white_24dp.svg"> </image>
+      </a>
+      <h3 id="item-dialog-name" style="float: left;">MODELNAME</h3>
+      <h4 id="item-dialog-creator" style="font-weight: lighter; float: left; margin-left: 5px;">by Tristan</h4>
+      <div class="model-content">
+        <div class="model-view-text">
+          <div class="multi-textures">
+            <h3>Texture Variants:</h3>
+            <div class="behavior_list" id="textures_listing">
+              <label class="control control-checkbox">
+                Idle
+                    <input type="checkbox" />
+                <div class="control_indicator"></div>
+              </label>
+            </div>
+          </div>
+          <div class="multi-animations">
+            <h3>Animations:</h3>
+            <div class="behavior_list" id="animation_listing">
+              <label class="control control-checkbox">
+                Idle
+                    <input type="checkbox" />
+                <div class="control_indicator"></div>
+              </label>
+            </div>
+          </div>
+          <div class="multi-behaviors">
+            <h3>Behaviors:</h3>
+            <div class="behavior_list" id="behavior_listing">
+            </div>
+          </div>
+          <a class="add-to-cart" id="addtocart">
+            Add to cart
+          </a>
+        </div>
+        <div id="model-view" class="model-view">
+        </div>
+      </div>
+    </div>
+    <script>
+      document.getElementById("close-button").addEventListener('click', event => {
+        window.api.send("toMain", "closeWindow");
+      });
+      document.getElementById("checkout-side").onclick = function () {
+        location.href = "./checkout.html";
+      };
+    </script>
+    <!-- three.js -->
+    <script src="assets/three/three.js"></script>
+    <script type="module" src="assets/three/GLTFLoader.js"></script>
+    <script type="module">
+    </script>
+    <script type="module" src="./js/load_items.js">
+    </script>
+    <script src="./js/dialoges.js">
+    </script>
+  </body>
+</html>

package/index_admin.html ADDED Viewed

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+    <link href="./assets/css/basic.css" rel="stylesheet">
+    <link href="./assets/css/dialog.css" rel="stylesheet">
+    <title>Browse</title>
+  </head>
+  <body>
+    <section id="head">
+      <div class="drag-field-head">
+        <p class="drag-field-text">ModelManager</p>
+      </div>
+      <div class="win-btn">
+        <a class="btn-win" id="close-button">
+          <img src="assets/white/close_white_24dp.svg" style="display: flex;">
+        </a>
+      </div>
+    </section>
+    <section id="sidebar">
+      <section class="title-container">
+        <img src="assets/logo.png" width="70px" alt="logo">
+      </section>
+      <section class="links-container">
+        <div class="links active">
+          <div class="icon">
+            <img src="assets/white/store_white_24dp.svg">
+          </div>
+          <span>Browse</span>
+        </div>
+        <div class="links" id="checkout-side">
+          <div class="icon">
+            <img src="assets/white/receipt_white_24dp.svg">
+          </div>
+          <span class="underline-hovered">Checkout</span>
+        </div>
+        <div class="links" id="admin_panel">
+          <div class="icon">
+            <img width="32px" height="37px" src="assets/white/admin.svg">
+          </div>
+          <span class="underline-hovered">Admin</span>
+        </div>
+      </section>
+    </section>
+    <section id="main-content">
+      <div id="loading">
+        <h3 id="loading-text">loading...</h3>
+        <img id="loading-image" src="assets/spinner.gif" alt="Loading..." width="70px"/>
+      </div>
+      <section id="top-section">
+        <div class="input-box" >
+          <div class="input-icon">
+            <img src="assets/white/search_white_24dp.svg">
+          </div>
+          <input placeholder="Search..." data-search>
+        </div>
+        <!-- THIS NEEDS TO BE IMPLEMENTED -->
+        <!-- <div class="action-icons">
+          <div class="action-icon-one">
+            <img class="action-icons" src="assets/white/filter_list_white_24dp.svg" width="25px">
+          </div>
+        </div> -->
+      </section>
+      <h3 class="result-headline">Results: </h3>
+      <!-- All items listed in here -->
+      <section id="items">
+        <template data-item-template>
+          <div class="grid-item" id="template">
+            <div class="grid-picture">
+              <img src="assets/testing.png" width="190px">
+            </div>
+            <h4 class="grid-label">Testmodel</h4>
+            <div class="grid-data">
+              <div class="grid-textures">
+                <span data-tooltip="Textures" data-flow="bottom">
+                  <img src="assets/white/brush_white_24dp.svg">
+                </span>
+              </div>
+              <div class="grid-anims">
+                <span data-tooltip="Animations" data-flow="bottom">
+                  <img src="assets/white/emoji_people_white_24dp.svg">
+                </span>
+              </div>
+              <div class="grid-behavior">
+                <span data-tooltip="Behavior" data-flow="bottom">
+                  <img src="assets/white/code_white_24dp.svg">
+                </span>
+              </div>
+              <div class="grid-view-vr">
+                <span data-tooltip="3D View" data-flow="bottom" id="">
+                  <img src="assets/white/view_in_ar_white_24dp.svg">
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </section>
+    </section>
+    <!--transition-->
+    <main id="swup" class="transition-fade">
+      <h1>Cart</h1>
+    </main>
+    <!--Renderer-->
+    <div id="body-overlay"></div>
+    <div class="dialog" id="item-dialog">
+      <a href="#" role="button" class="dialog-close-button" id="dialog-close-button">
+        <image src="assets/white/close_white_24dp.svg"> </image>
+      </a>
+      <h3 id="item-dialog-name" style="float: left;">MODELNAME</h3>
+      <h4 id="item-dialog-creator" style="font-weight: lighter; float: left; margin-left: 5px;">by Tristan</h4>
+      <div class="model-content">
+        <div class="model-view-text">
+          <div class="multi-textures">
+            <h3>Texture Variants:</h3>
+            <div class="behavior_list" id="textures_listing">
+              <label class="control control-checkbox">
+                Idle
+                    <input type="checkbox" />
+                <div class="control_indicator"></div>
+              </label>
+            </div>
+          </div>
+          <div class="multi-animations">
+            <h3>Animations:</h3>
+            <div class="behavior_list" id="animation_listing">
+              <label class="control control-checkbox">
+                Idle
+                    <input type="checkbox" />
+                <div class="control_indicator"></div>
+              </label>
+            </div>
+          </div>
+          <div class="multi-behaviors">
+            <h3>Behaviors:</h3>
+            <div class="behavior_list" id="behavior_listing">
+            </div>
+          </div>
+          <a class="add-to-cart" id="addtocart">
+            Add to cart
+          </a>
+        </div>
+        <div id="model-view" class="model-view">
+        </div>
+      </div>
+    </div>
+    <script>
+      document.getElementById("close-button").addEventListener('click', event => {
+        window.api.send("toMain", "closeWindow");
+      });
+      document.getElementById("checkout-side").onclick = function () {
+        location.href = "./checkout_admin.html";
+      };
+      document.getElementById("admin_panel").onclick = function () {
+        location.href = "./administration.html";
+      };
+    </script>
+    <!-- three.js -->
+    <script src="assets/three/three.js"></script>
+    <script type="module" src="assets/three/GLTFLoader.js"></script>
+    <script type="module">
+    </script>
+    <script type="module" src="./js/load_items.js">
+    </script>
+    <script src="./js/dialoges.js">
+    </script>
+  </body>
+</html>

package/js/db/push_model.js ADDED Viewed

@@ -0,0 +1,30 @@
+const { MongoClient, ServerApiVersion } = require('mongodb');
+const uri = "mongodb+srv://adminmn:eQJ62Cszrvi7VgD@mnmodeldatabase.zsxqn.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
+const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true, serverApi: ServerApiVersion.v1 });
+const database = client.db("modeldatabase");
+const models = database.collection("models");
+function push(model_name, model_creator, model_path, thumbnail, has_anims, has_behavior, has_textures, animations, behaviors, textures, tags) {
+    client.connect(err => {
+        if (err) throw err;
+        var modelobj = {
+            released: true, model_name: model_name, model_creator: model_creator,
+            model_path: model_path, thumbnail: thumbnail, has_anims: has_anims, has_behavior: has_behavior,
+            has_textures: has_textures,
+            animations: animations,
+            behavior: behaviors,
+            textures: textures,
+            tags: tags
+        }
+        models.insertOne(modelobj);
+        models.find().forEach( function(item) {
+            item.animations.forEach(function (item, index) {
+            });
+        });
+    });
+    client.close();
+}

package/js/dialoges.js ADDED Viewed

@@ -0,0 +1,23 @@
+document.getElementById('body-overlay').addEventListener('click', function(e) {
+    document.getElementById("item-dialog").classList.remove("visable");
+    document.getElementById("body-overlay").classList.remove("visable");
+});
+document.getElementById('dialog-close-button').addEventListener('click', function(e) {
+    document.getElementById("item-dialog").classList.remove("visable");
+    document.getElementById("body-overlay").classList.remove("visable");
+});
+document.onkeydown = function(evt) {
+    evt = evt || window.event;
+    var isEscape = false;
+    if ("key" in evt) {
+        isEscape = (evt.key === "Escape" || evt.key === "Esc");
+    } else {
+        isEscape = (evt.keyCode === 27);
+    }
+    if (isEscape) {
+        document.getElementById("item-dialog").classList.remove("visable");
+        document.getElementById("body-overlay").classList.remove("visable");
+    }
+};

package/js/item_functionality.js ADDED Viewed

@@ -0,0 +1,7 @@
+document.querySelectorAll('.grid-item').forEach(function(item) {
+    item.addEventListener('click', function() {
+      document.getElementById("item-dialog").classList.add("visable");
+      document.getElementById("body-overlay").classList.add("visable");
+      document.getElementById("item-dialog-name").innerText = item.dataset.identifier;
+    });
+});

package/js/load_admin.js ADDED Viewed

@@ -0,0 +1,32 @@
+window.api.send("database_request", "rq_orderdata");
+window.api.receive('admin_channel', function (data, evt) {
+    var list = document.getElementById("order-listing")
+    var a = document.createElement('a')
+    a.id = "finish_order"
+    var img_in_a = document.createElement('img')
+    img_in_a.src = "./assets/white/admin/check.svg"
+    a.appendChild(img_in_a);
+    var newLI = document.createElement('li')
+    newLI.id = "order-item"
+    newLI.dataset.order_id = data[0].order_number
+    a.dataset.order_id = data[0].order_number
+    newLI.dataset.item_obj = data[0].orders
+    newLI.innerHTML = "Ordercode: #" + data[0].order_number + " | Orderer: " + data[0].orderer + " | Items: " + data[0].orders.length
+    newLI.appendChild(a);
+    list.appendChild(newLI);
+    document.querySelectorAll("#finish_order").forEach(function (item) {
+            item.addEventListener('click', function() {
+                window.api.send("database_request", "delete_order:" + item.dataset.order_id);
+            });
+     });
+});
+window.api.receive('renderer', function (data, evt) {
+    if(data == "stop-spinner") {
+        document.getElementById("loading").remove();
+    } else if (data == "reload_side") {
+        location.reload()
+    }
+});

package/js/load_cart.js ADDED Viewed

@@ -0,0 +1,76 @@
+import { GLTFLoader } from '../assets/three/GLTFLoader.js'
+import { OrbitControls } from '../assets/three/OrbitControls.js'
+var newCart = [];
+// define cart
+window.api.send("cart_request", "rq")
+window.api.receive('cart_answer', function (data, evt) {
+  newCart = [...new Set(data)];;
+});
+window.api.send("database_request", "rqID");
+const items = []
+window.api.receive('item_channel', function (data, evt) {
+    items.push(data)
+    if (newCart.includes(data[0].modelname)) {
+        var item = document.createElement('div');
+        item.className = "grid-item";
+        item.dataset.identifier = data[0].count;
+        // grid picture div
+        var grid_pic = document.createElement('div');
+        grid_pic.className = "grid-picture";
+        var grid_pic_img = document.createElement('img');
+        // get img path
+        grid_pic_img.src = data[0].thumbnail;
+        grid_pic_img.width = 190;
+        grid_pic.appendChild(grid_pic_img);
+        item.appendChild(grid_pic);
+        // grid label
+        var grid_label = document.createElement('h4');
+        grid_label.className = "grid-label"
+        grid_label.innerText = data[0].modelname
+        item.appendChild(grid_label)
+        // add item to items sections
+        document.getElementById('items').appendChild(item);
+        item.dataset.modelname = data[0].modelname
+        item.dataset.modelcreator = data[0].modelcreator
+        item.dataset.modelpath = data[0].model_path
+        // create li
+        var catalog_item = document.createElement('li');
+        catalog_item.innerHTML = data[0].modelname
+        catalog_item.id = data[0].modelname
+        document.getElementById('checkout_catalog').appendChild(catalog_item);
+        // var catlog_removal = document.createElement('a');
+        // catlog_removal.id = "remove_item_from_checkout";
+        // catlog_removal.innerHTML = "Remove"
+        // document.getElementById(data[0].modelname).appendChild(catlog_removal);
+        // set item data so we can work with it later
+        item.dataset.behaviors = data[0].behaviors
+        item.dataset.textures = data[0].textures
+        item.dataset.animation = data[0].animations
+        item.dataset.tags = data[0].tags
+    }
+});
+window.api.receive('renderer', function (data, evt) {
+  if(data = "stop-spinner") {
+    document.getElementById("loading").remove()
+  }
+  if (newCart.length == 0) {
+    let no_results = document.createElement("h2");
+    no_results.textContent = "Your Cart is empty!"
+    document.getElementById("action-icon-one").remove();
+    document.getElementById("items").appendChild(no_results)
+  }
+});