Finally checkbox logic is completed, Utils: calculateCHMod is working

Author: WrathChaos

src/components.d.ts

@@ -14,6 +14,9 @@ export namespace Components {
     * The first name
     */
     'first': string;
+    'isExecuteChecked': boolean;
+    'isReadChecked': boolean;
+    'isWriteChecked': boolean;
     /**
     * The last name
     */
@@ -22,6 +25,7 @@ export namespace Components {
     * The middle name
     */
     'middle': string;
+    'permissionValue': number;
   }
 }
 
@@ -44,6 +48,9 @@ declare namespace LocalJSX {
     * The first name
     */
     'first'?: string;
+    'isExecuteChecked'?: boolean;
+    'isReadChecked'?: boolean;
+    'isWriteChecked'?: boolean;
     /**
     * The last name
     */
@@ -52,6 +59,7 @@ declare namespace LocalJSX {
     * The middle name
     */
     'middle'?: string;
+    'permissionValue'?: number;
   }
 
   interface IntrinsicElements {

src/components/chmod-checkbox/chmod-checkbox.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, h } from "@stencil/core";
+import { calculatePermission } from "../../utils/utils";
 
 @Component({
   tag: "chmod-checkbox",
@@ -9,25 +10,43 @@ export class CHModCheckbox {
   /**
    * The first name
    */
-  @Prop() first: string = "READ";
+  @Prop({ mutable: true }) first: string = "READ";
 
   /**
    * The middle name
    */
-  @Prop() middle: string = "WRITE";
+  @Prop({ mutable: true }) middle: string = "WRITE";
 
   /**
    * The last name
    */
-  @Prop() last: string = "EXECUTE";
+  @Prop({ mutable: true }) last: string = "EXECUTE";
+
+  @Prop() permissionValue: number = 0;
+  @Prop() isReadChecked: boolean = false;
+  @Prop() isWriteChecked: boolean = false;
+  @Prop() isExecuteChecked: boolean = false;
 
   render() {
     return (
       <div class="wrapper">
         <div class="column1 animated-checkbox">
           <form>
             <div class="flex-center-vertically">
-              <input name="check" type="checkbox" id="read" />
+              <input
+                id="read"
+                name="check"
+                type="checkbox"
+                checked={this.isReadChecked}
+                onChange={() => {
+                  this.isReadChecked = !this.isReadChecked;
+                  this.permissionValue = calculatePermission(
+                    "read",
+                    this.isReadChecked,
+                    this.permissionValue
+                  );
+                }}
+              />
               <label htmlFor="read">
                 <span></span>
               </label>
@@ -38,7 +57,20 @@ export class CHModCheckbox {
         <div class="column2 animated-checkbox">
           <form>
             <div class="flex-center-vertically">
-              <input name="check" type="checkbox" id="write" />
+              <input
+                id="write"
+                name="check"
+                type="checkbox"
+                checked={this.isWriteChecked}
+                onChange={() => {
+                  this.isWriteChecked = !this.isWriteChecked;
+                  this.permissionValue = calculatePermission(
+                    "write",
+                    this.isWriteChecked,
+                    this.permissionValue
+                  );
+                }}
+              />
               <label htmlFor="write">
                 <span></span>
               </label>
@@ -49,7 +81,20 @@ export class CHModCheckbox {
         <div class="column3 animated-checkbox">
           <form>
             <div class="flex-center-vertically">
-              <input name="check" type="checkbox" id="execute" />
+              <input
+                id="execute"
+                name="check"
+                type="checkbox"
+                checked={this.isExecuteChecked}
+                onChange={() => {
+                  this.isExecuteChecked = !this.isExecuteChecked;
+                  this.permissionValue = calculatePermission(
+                    "execute",
+                    this.isExecuteChecked,
+                    this.permissionValue
+                  );
+                }}
+              />
               <label htmlFor="execute">
                 <span></span>
               </label>

src/index.html

@@ -11,6 +11,6 @@
       <script nomodule src="/build/chmod-checkbox.js"></script>
     </head>
   <body>  
-    <chmod-checkbox />
+      <chmod-checkbox />
   </body>
 </html>

src/utils/utils.ts

@@ -1,8 +1,28 @@
+export function calculatePermission(
+  type: string,
+  logic: boolean,
+  permission: number
+) {
+  switch (type) {
+    case "read":
+      permission = logic === true ? permission + 1 : permission - 1;
+      break;
+    case "write":
+      permission = logic === true ? permission + 2 : permission - 2;
+      break;
+    case "execute":
+      permission = logic === true ? permission + 4 : permission - 4;
+      break;
+    default:
+      return permission;
+  }
+  permission < 0 ? (permission = 0) : permission;
+  console.log("Permission: ", permission);
+  return permission;
+}
 
 export function format(first: string, middle: string, last: string): string {
   return (
-    (first || '') +
-    (middle ? ` ${middle}` : '') +
-    (last ? ` ${last}` : '')
+    (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "")
   );
 }