Enhance networks Component

packages/grid_client/tests/README.md

@@ -42,5 +42,5 @@ yarn test --runInBand
 > `--coverage`: Collect and report coverage.
 > `--colors`: Force colorful output.
 > `--forceExit`: Force the process to exit after tests complete.
-> 
+>
 > **Note:** Some tests are using Mycelium for the SSH connection, which is why it is important for Mycelium to be running.

packages/playground/public/info/jenkins.md

@@ -2,4 +2,4 @@
 title: Jenkins
 ---
 
-Jenkins is a popular open-source automation server that enables developers to build, test, and deploy their applications continuously. For more details, check [Jenkins documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/jenkins.html).
+Jenkins is a popular open-source automation server that enables developers to build, test, and deploy their applications continuously. For more details, check [Jenkins documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/jenkins.html).

packages/playground/src/components/NetworkItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <input-tooltip v-if="value !== null" inline :tooltip="tooltipText">
+    <v-switch
+      hide-details
+      color="primary"
+      inset
+      :label="label"
+      :model-value="value"
+      @update:model-value="callEmitFunction($event ?? false)"
+      :readonly="readonly"
+      :style="{ opacity: readonly ? 0.5 : 1 }"
+    />
+  </input-tooltip>
+</template>
+
+<script lang="ts">
+import { computed, type PropType } from "vue";
+
+export default {
+  name: "NetworkItem",
+  props: {
+    tooltipText: { type: String, required: true },
+    label: { type: String, required: true },
+    value: Boolean as PropType<boolean | null | undefined>,
+    emitFunction: Function as PropType<any>,
+  },
+  setup(props) {
+    const readonly = computed(() => typeof props.emitFunction !== "function");
+    function callEmitFunction(value?: boolean): void {
+      if (typeof props.emitFunction === "function") {
+        props.emitFunction(value);
+      }
+    }
+
+    return { readonly, callEmitFunction };
+  },
+};
+</script>

packages/playground/src/components/applications/ApplicationCards.vue

@@ -7,7 +7,7 @@
             <v-card
               :height="200"
               class="pa-3 pt-6"
-              style="width: 100%;" 
+              style="width: 100%"
               v-bind="props"
               :class="[
                 isHovering ? 'card-opacity' : undefined,

packages/playground/src/components/caprover_worker.vue

@@ -25,12 +25,11 @@
 
     <Networks
       required
-      v-model:ipv4="$props.modelValue.ipv4"
+      :ipv4="$props.modelValue.ipv4"
       v-model:ipv6="$props.modelValue.ipv6"
       v-model:planetary="$props.modelValue.planetary"
       v-model:mycelium="$props.modelValue.mycelium"
       v-model:wireguard="$props.modelValue.wireguard"
-      enableIpv4
     />
 
     <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">

packages/playground/src/components/input_tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex" v-if="!disabled">
+  <div class="d-flex" v-if="!disabled" v-bind="$attrs">
     <v-tooltip :text="tooltip || 'None!'" :location="location" :width="width ? width : ''">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}