From f24c6e330cc25216b547d5c2c39173d2216c547a Mon Sep 17 00:00:00 2001
From: stuzer05 <stuzer05@stuzer.link>
Date: Thu, 30 Nov 2023 08:12:59 +0200
Subject: [PATCH] Add str len mode, refactor str case mode

---
 src/components/Sidebar.vue     |  4 +--
 src/router/index.js            | 12 ++++----
 src/views/StrLength.vue        | 52 ++++++++++++++++++++++++++++++++++
 src/views/StrToLower.vue       | 37 ------------------------
 src/views/StrToLowerUppper.vue | 52 ++++++++++++++++++++++++++++++++++
 src/views/StrToUpper.vue       | 37 ------------------------
 6 files changed, 112 insertions(+), 82 deletions(-)
 create mode 100644 src/views/StrLength.vue
 delete mode 100644 src/views/StrToLower.vue
 create mode 100644 src/views/StrToLowerUppper.vue
 delete mode 100644 src/views/StrToUpper.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index fea1e05..0f0ec7f 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -30,8 +30,8 @@ export default {
       },
       'Strings': {
         'fix_ru_en_keyboard': 'Fix ru-en keyboard',
-        'str_to_lower': 'Str to lower',
-        'str_to_upper': 'Str to upper',
+        'str_length': 'Str length',
+        'str_to_lower_upper': 'Str to lower/upper',
       },
       'SQL': {
         'sql_split_in': 'SQL split IN',
diff --git a/src/router/index.js b/src/router/index.js
index a24e265..306b9f7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,14 +16,14 @@ const router = createRouter({
 		 * String manipulation
 		 */
 		{
-			path: '/str_to_upper',
-			name: 'str_to_upper',
-			component: () => import('../views/StrToUpper.vue'),
+			path: '/str_length',
+			name: 'str_length',
+			component: () => import('../views/StrLength.vue'),
 		},
 		{
-			path: '/str_to_lower',
-			name: 'str_to_lower',
-			component: () => import('../views/StrToLower.vue'),
+			path: '/str_to_lower_upper',
+			name: 'str_to_lower_upper',
+			component: () => import('../views/StrToLowerUppper.vue'),
 		},
 		{
 			path: '/fix_ru_en_keyboard',
diff --git a/src/views/StrLength.vue b/src/views/StrLength.vue
new file mode 100644
index 0000000..3e6226e
--- /dev/null
+++ b/src/views/StrLength.vue
@@ -0,0 +1,52 @@
+<template>
+  <h2 class="tool-title">Str length</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label>Mode</label>
+
+    <div>
+      <input id="count_mode_characters" value="characters" name="count_mode" v-model="toolData.countMode" type="radio"> <label for="count_mode_characters">characters</label><br>
+      <input id="count_mode_words" value="words" name="count_mode" v-model="toolData.countMode" type="radio"> <label for="count_mode_words">words</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        countMode: 'characters',
+      },
+    };
+  },
+  computed: {
+    toolResult() {
+      switch (this.toolData.countMode) {
+        case 'characters':
+          return this.toolData.data.length;
+        case 'words':
+          return this.toolData.data.trim().split(/\s+/).length;
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/StrToLower.vue b/src/views/StrToLower.vue
deleted file mode 100644
index 3e90b6d..0000000
--- a/src/views/StrToLower.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <h2 class="tool-title">Str to lower</h2>
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
-  </div>
-
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      toolData: {
-        data: '',
-      },
-    };
-  },
-  computed: {
-    toolResult() {
-      return this.toolData.data.toLocaleLowerCase();
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/src/views/StrToLowerUppper.vue b/src/views/StrToLowerUppper.vue
new file mode 100644
index 0000000..a4b3969
--- /dev/null
+++ b/src/views/StrToLowerUppper.vue
@@ -0,0 +1,52 @@
+<template>
+  <h2 class="tool-title">Str to lower/upper</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label>Mode</label>
+
+    <div>
+      <input id="case_mode_lower" value="lower" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_lower">to lower</label><br>
+      <input id="case_mode_upper" value="upper" name="case_mode" v-model="toolData.caseMode" type="radio"> <label for="case_mode_upper">to upper</label>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        caseMode: 'upper',
+      },
+    };
+  },
+  computed: {
+    toolResult() {
+      switch (this.toolData.caseMode) {
+        case 'lower':
+          return this.toolData.data.toLocaleLowerCase();
+        case 'upper':
+          return this.toolData.data.toLocaleUpperCase();
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/StrToUpper.vue b/src/views/StrToUpper.vue
deleted file mode 100644
index 0056a6b..0000000
--- a/src/views/StrToUpper.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <h2 class="tool-title">Str to upper</h2>
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="data">Data</label>
-    <textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
-  </div>
-
-  <hr class="mt-5 mb-5">
-
-  <div class="input-group">
-    <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      toolData: {
-        data: '',
-      },
-    };
-  },
-  computed: {
-    toolResult() {
-      return this.toolData.data.toLocaleUpperCase();
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-
-</style>
\ No newline at end of file