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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

4 días hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

5 días hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

5 días hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

6 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

2 semanas hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

2 semanas hace

Esta web usa cookies.