Algoritmos

Calculadora chmod con VueJS y Bootstrap

Introducción

En mi clase de Administración de servidores tenía un poco de tiempo libre y decidí hacer una calculadora chmod (o así la llamo yo). Lo que hace es que, con una interfaz gráfica agradable eliges los permisos de usuario, grupo y el resto del mundo para un archivo, y también eliges permisos de lectura, escritura y ejecución.

Una vez que terminaste de seleccionar, te da los comandos Linux que necesitas aplicar; ya sea en modo octal o con letra (que a mi parecer es más entendible).

Está hecha con VueJS y Bootstrap4. Me basé en lo que dice la Wikipedia, y probé los comandos en un servidor; fueron bastante exactos.

Ejemplo de cómo funciona la calculadora chmod

Calculadora chmod

Para no darle más vueltas al asunto, puedes ver el pen aquí: Ver pen

Igualmente lo dejo embebido por si quieres probarlo sin salir de esta página:

Click para abrir: Ver en codepen.io by Luis Cabrera Benito (@parzibyte) on CodePen.

Si quieres saber su funcionamiento (que no es nada del otro mundo) sigue leyendo 😉

¿Cómo funciona la calculadora chmod?

Comparaciones

Es una serie de ifs. Primero debemos ver a los permisos como 3 bits. Y de izquierda a derecha se leen R, W, X.

A una cadena que contendrá los 3 bits le vamos concatenando un 0 o un 1. Si el usuario seleccionó lo de R, entonces le añadimos un 1. Si no, un 0. Luego hacemos lo mismo con W y finalmente con X. Finalmente quedará una cadena de 3 caracteres como:

111

Más tarde convertimos ese número a octal, que en este caso sería 7. Y repetimos ese proceso para el grupo y para el resto del mundo… simples comparaciones.

Agregar opcionalmente

Como se ve, podemos agregar o no agregar la opción de directorio o con sudo. Eso igualmente es un if con el operador ternario:

this.conDirectorio ? "-R " : "";

Si seleccionaron la opción entonces ponemos la opción -R para que sea recursivo. Si no, no agregamos nada. Lo mismo hacemos con sudo.

Las letras

Para las letras de u=rwx es lo mismo, sólo comparamos. Si el usuario seleccionó r, entonces concatenamos una r. Si no, no concatenamos nada (“”).

let comandoConLetras = prefijoSudo + "chmod " + recursivo + "u=" + this.obtenerPermisoComoLetras("owner");
comandoConLetras += ",g=" + this.obtenerPermisoComoLetras("group");
comandoConLetras += ",o=" + this.obtenerPermisoComoLetras("all") + nombreArchivo;

Generar en cualquier cambio

Finalmente utilizamos a watch para vigilar un cambio ya sea a los permisos, a las opciones o al nombre del directorio o fichero:

watch: {
 conDirectorio(){
  this.generar();
 },
 conSudo(){
  this.generar();
 },
 nombreArchivo(){
  this.generar();
 },
 permisos: {
  handler(valor){
   this.generar();
  },
  deep: true,
 }
},

En la opción de permisos marcamos la opción deep como true, ya que es un objeto.

Diccionarios en todos lados

Como vemos, los permisos son un diccionario cuyas claves son owner, group o all. Esto es para que podamos acceder a ellos utilizando dicha clave. El diccionario está así:

permisos: {
 owner: {
  lectura: false,
  escritura: false,
  ejecucion: false,
 },
 group: {
  lectura: false,
  escritura: false,
  ejecucion: false,
 },
 all: {
  lectura: false,
  escritura: false,
  ejecucion: false,
 },
}

Y cuando queremos marcar a todos, accedemos a él dependiendo del valor quien.

marcarTodosLosDe(quien){
 for(let clave in this.permisos[quien]){
  if(this.permisos[quien].hasOwnProperty(clave)){
   this.permisos[quien][clave] = true;
  }
 }
},

Eso es un resumen de cómo está hecho. Si tienes dudas eres libre de analizar el código fuente o preguntar en los comentarios.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.