From 14e3b5bb95ac1211dee3c624677d8f8f09dfdf3b Mon Sep 17 00:00:00 2001
From: Matthew Salvatore Giancola <matthew.giancola42@gmail.com>
Date: Mon, 15 Jul 2024 12:03:08 -0400
Subject: [PATCH] Updated shrink and grow

---
 index.html => vici.html | 18 +-----------------
 vici.js                 | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 18 deletions(-)
 rename index.html => vici.html (63%)

diff --git a/index.html b/vici.html
similarity index 63%
rename from index.html
rename to vici.html
index 0a287e4..a3d8787 100644
--- a/index.html
+++ b/vici.html
@@ -16,23 +16,7 @@
       </details>
     </header>
     <section id="platform-content">
-      <!--Below is an example, should be commented later-->
-      <article id="form-core-1" style="left:10rem;top:10rem;z-index:1;">
-        <form style="width:25rem;height:6rem;">
-          <input type="text" name="head" value="head"/>
-          <input type="text" name="body" value="body"/>
-          <input type="text" name="tail" value="tail"/>
-        </form>
-        <!--This is the below element which includes buttons to do different keyu elements-->
-        <details>
-          <summary>Options</summary>
-          <button name="form-core-1" onclick="moveRecord(this.name)">Move</button>
-          <button name="form-core-1" onclick="saveRecord(this.name)">Sync</button>
-          <button name="form-core-1" onclick="killRecord(this.name)">Delete</button>
-          <button name="form-core-1" onclick="pullRecord(this.name)">Front</button>
-          <button name="form-core-1" onclick="pushRecord(this.name)">Back</button>
-        </details>
-      </article>
+      <!--JS will import these-->
     </section>
     <footer id="platform-footer">
       <!--Generic footer for setttings and tools and search, not 100% sure what should go here-->
diff --git a/vici.js b/vici.js
index 0b9e897..c94df6c 100644
--- a/vici.js
+++ b/vici.js
@@ -4,11 +4,14 @@ function createOptionsForCards(coreId){
     const mainDetail = document.createElement("details");
     const summaryElement = document.createElement('summary');
     summaryElement.appendChild(document.createTextNode("Options"));
+    mainDetail.appendChild(summaryElement);
     const moveId = coreId;
     const saveId = coreId;
     const killId = coreId;
     const pullId = coreId;
     const pushId = coreId;
+    const moreId = coreId;
+    const lessId = coreId;
     const moveButton = document.createElement("button");
     moveButton.appendChild(document.createTextNode("Move"));
     moveButton.name = moveId;
@@ -34,7 +37,16 @@ function createOptionsForCards(coreId){
     pushButton.name = pushId;
     pushButton.setAttribute("onclick", "pushRecord(this.name)");
     mainDetail.appendChild(pushButton);
-    mainDetail.appendChild(summaryElement);
+    const moreButton = document.createElement("button");
+    moreButton.appendChild(document.createTextNode("Grow"));
+    moreButton.name = moreId;
+    moreButton.setAttribute("onclick", "moreRecord(this.name)");
+    mainDetail.appendChild(moreButton);
+    const lessButton = document.createElement("button");
+    lessButton.appendChild(document.createTextNode("Shrink"));
+    lessButton.name = lessId;
+    lessButton.setAttribute("onclick", "lessRecord(this.name)");
+    mainDetail.appendChild(lessButton);
     return mainDetail;
 }
 
@@ -262,6 +274,26 @@ function pushRecord(event){
     console.log(event);
     document.getElementById(event).style.zIndex--;
 }
+/**
+ * Function to bring the record forward
+ * @param {*} event 
+ */
+function moreRecord(event){
+    console.log("pullRecord");
+    console.log(event);
+    let widthValue= parseInt(document.getElementById(event).children[0].style.width);
+    document.getElementById(event).children[0].style.width = (widthValue+1)+"rem";
+}
+/**
+ * Function to bring the record back
+ * @param {*} event 
+ */
+function lessRecord(event){
+    console.log("pullRecord");
+    console.log(event);
+    let widthValue= parseInt(document.getElementById(event).children[0].style.width);
+    document.getElementById(event).children[0].style.width = (widthValue-1)+"rem";
+}
 /**
  * On change operation for the given fields
  * @param {*} event