Unix: Permission

Basic hex, decimal unix permission

by Joey Albert Abano

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.2.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.2.1/cerulean/bootstrap.min.css">
<div class="container">

  <div class="form-group">
    <label>Symbolic</label> <input id="symbolic" readonly class="form-control">
  </div>
  <div class="form-group">
    <label>Numeric</label> <input id="numeric" class="form-control">
  </div>
  <div>
    <div>
      Owner <input type="checkbox">R <input type="checkbox">W <input type="checkbox">X
    </div>
    <div>
      Group <input type="checkbox">R <input type="checkbox">W <input type="checkbox">X
    </div>
    <div>
      Others<input type="checkbox">R <input type="checkbox">W <input type="checkbox">X
    </div>
  </div>

  <div>
  Umask File <span id="umask-file-sym" ></span> <span id="umask-file-num" ></span>
  </div>
  <div>
  Umask Directory  <span id="umask-dir-sym" ></span> <span id="umask-dir-num" ></span>
  </div>

</div>

CSS

body {
  background:#222;
  color:#fff;
  font-family: consolas
  
}
body, input {
  font-size:14px;
}

input { 
  width:100px; 
}

h1 {
  font-size:18px;
}

h2 {
  font-size:16px;
}

JavaScript

var binarypermission = '110100100';

$(function() {
  updateSymbolic();
  updateNumeric();
	updateCheckbox();
  updateUmask();
  
  // numeric input on keyup
  $('#numeric').on('keyup',function(){
  	var v = $(this).val()
    binarypermission = intBin(v.charAt(0))+intBin(v.charAt(1))+intBin(v.charAt(2));
		updateSymbolic();  
		updateCheckbox();
    updateUmask();
  });

	// check box on update
  $('input[type="checkbox"]').on('change', function() {
    $('input[type="checkbox"]').each(function(index) {
      var flag = $(this).is(":checked") ? '1' : '0';
      binarypermission = replaceAt(binarypermission, index, flag);		
    });    
    updateSymbolic();
    updateNumeric();
    updateUmask();
  });

})

function updateSymbolic() {
  var symbolic = "";
  for (var i=0; i< binarypermission.length; i++) {
     if( binarypermission.charAt(i) == '1' ) {
       switch(i%3) {
         case 0: symbolic=symbolic+'R';break;
         case 1: symbolic=symbolic+'W';break;
         case 2: symbolic=symbolic+'X';break;
       }
     }
     else {
     	symbolic = symbolic + '-';
     }
  }
  $('#symbolic').val(symbolic);
}

function updateNumeric() {
	$('#numeric').val( parseInt(binarypermission.substr(0,3), 2) + '' +
	parseInt(binarypermission.substr(3,3), 2) + '' +
	parseInt(binarypermission.substr(6,3), 2) );
}

function updateCheckbox() {
  $('input[type="checkbox"]').each(function(index) {
     if( binarypermission.charAt(index) == 1 ) {
     	$(this).prop('checked', true);
     }
     else {
     	$(this).prop('checked', false);
     }
  });
}

function updateUmask() {
	var num = $('#numeric').val();
  var uf = '', ufs = '';
  var ud = '', uds = '';
  for(var i=0;i<3;i++) {
  	switch( parseInt(num.charAt(i)) ) {
    	case 0: uf+='7'; ufs='---'; ud+='7'; uds='---'; break;
      case 1: uf+='6'; ufs='--x'; ud+='6'; uds='--x'; break;
      case 2: uf+='5'; ufs='-w-'; ud+='5'; uds='-w-'; break;
      case 3: uf+='4'; ufs='-w-'; ud+='4'; uds='-wx'; break;
      case 4:...