aboutsummaryrefslogtreecommitdiff
path: root/src/tools/chmod-calculator/chmod-calculator.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/tools/chmod-calculator/chmod-calculator.vue')
-rw-r--r--src/tools/chmod-calculator/chmod-calculator.vue83
1 files changed, 83 insertions, 0 deletions
diff --git a/src/tools/chmod-calculator/chmod-calculator.vue b/src/tools/chmod-calculator/chmod-calculator.vue
new file mode 100644
index 0000000..31f8b9f
--- /dev/null
+++ b/src/tools/chmod-calculator/chmod-calculator.vue
@@ -0,0 +1,83 @@
+<template>
+ <div>
+ <n-table :bordered="false" :bottom-bordered="false" single-column class="permission-table">
+ <thead>
+ <tr>
+ <th class="text-center" scope="col"></th>
+ <th class="text-center" scope="col">Owner (u)</th>
+ <th class="text-center" scope="col">Group (g)</th>
+ <th class="text-center" scope="col">Public (o)</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="{ scope, title } of scopes" :key="scope">
+ <td class="line-header">{{ title }}</td>
+ <td v-for="group of groups" :key="group" class="text-center">
+ <!-- <n-switch v-model:value="permissions[group][scope]" /> -->
+ <n-checkbox v-model:checked="permissions[group][scope]" size="large" />
+ </td>
+ </tr>
+ </tbody>
+ </n-table>
+
+ <div class="octal-result">
+ {{ octal }}
+ </div>
+
+ <input-copyable :value="`chmod ${octal} path`" readonly style="margin-bottom: 5px" />
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useThemeVars } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { computeChmodOctalRepresentation } from './chmod-calculator.service';
+import InputCopyable from '../../components/InputCopyable.vue';
+
+import type { Group, Scope } from './chmod-calculator.types';
+
+const themeVars = useThemeVars();
+
+const scopes: { scope: Scope; title: string }[] = [
+ { scope: 'read', title: 'Read (4)' },
+ { scope: 'write', title: 'Write (2)' },
+ { scope: 'execute', title: 'Execute (1)' },
+];
+const groups: Group[] = ['owner', 'group', 'public'];
+
+const permissions = ref({
+ owner: { read: false, write: false, execute: false },
+ group: { read: false, write: false, execute: false },
+ public: { read: false, write: false, execute: false },
+});
+
+const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
+</script>
+
+<style lang="less" scoped>
+.octal-result {
+ text-align: center;
+ font-size: 50px;
+ font-family: monospace;
+ color: v-bind('themeVars.primaryColor');
+ margin: 20px 0;
+}
+.permission-table {
+ td,
+ th {
+ padding: 15px;
+
+ @media screen and (max-width: 600px) {
+ padding: 5px;
+ }
+ }
+}
+.line-header {
+ font-weight: bold;
+ text-align: right;
+ max-width: 80px;
+}
+.text-center {
+ text-align: center;
+}
+</style>