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…

19 horas 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…

1 día hace

PHP: incrustar imagen en base64

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

2 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…

3 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…

1 semana hace

PHP y JavaScript: llenar select con AJAX

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

1 semana hace

Esta web usa cookies.