<style>
.nodde-js-wrapper{
margin-top:2rem;
}
.nodejs-apps-actions{
display: flex;
}
.nodejs-apps-actions .fa{
margin: 0px;
}
.nodejs-apps-actions .btn{
margin-right: 5px;
}
.nodde-js-apps-list .ibox-title{
display: flex;
justify-content: space-between;
padding: 15px;
align-items: center;
}
.nodde-js-apps-list .ibox-title h4{
margin: 0px;
}
#nodejs_app_quick_actions_container,
#nodejs_loader_window,
#nodejs_form_window{
display: none;
}
.row-app-form{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.row-app-form label{
margin: 0px;
}
.row-app-form small{
margin: 0px;
/* color: lemonchiffon; */
display: block;
color: #777777;
font-size: 1.2rem;
}
.required-asterisk{
color: #d14844 !important;
display: inline-block !important;
position: relative;
top: 2px;
}
.nodejs-app-path-selector{
display: flex;
}
.dir-sel-btn {
display: flex;
align-items: center;
color: inherit;
background: white;
border: 1px solid #e7eaec;
height: 3.2rem;
width: auto;
}
#modal_file_explorer .modal-body{
height: 60vh;
overflow: auto;
padding: 15px 5px;
}
#modal_file_explorer .modal-body{
max-height:70vh;
min-height:40vh;
overflow:auto;
}
#modal_file_explorer .dir-item:nth-child(even){
background-color:#f3f3f3;
}
#modal_file_explorer .dir-item:hover{
background-color:#cccccc;
cursor:pointer;
color: #333;
}
#modal_file_explorer .dir-item{
padding: 5px;
}
.dir-item .fa{
margin-right:5px;
}
.directory-selector-btn{
display:flex;
}
.dir-sel-btn .fa{
font-size: 2rem;
margin-right: 5px;
}
.dir-sel-btn{
display: flex;
align-items: center;
}
#dirsel-container{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
/* border: 1px solid #999; */
direction: rtl;
text-align: left;
line-height: 1.5rem;
padding: 0px;
display: inline-block;
margin-bottom: 0px;
}
#dir_list{
padding-bottom: 10px;
padding-left: 10px;
font-size: 1.5rem;
}
#nodejs_form_window .panel-collapse{
padding: 20px 20px 5px;
}
.select2-container{
width:100% !important;
}
.select2-selection{
height: 34px !important;
display: flex !important;
align-items: center;
justify-content: space-between;
border: 1px solid #ddd !important;
border-radius: 0px !important;
}
.select2-selection__rendered{
color:#999999 !important;
}
.select2-selection__arrow{
position:relative !important;
}
.nodejs-empty-env-vars{
display: flex;
height: 5vh;
align-items: center;
justify-content: center;
}
.env-vars-btn-container{
display: flex;
padding: 0px 2.5rem;
}
.env-vars-btn-container .btn-danger{
margin-right: 5px;
}
#_filled_envars_nodejs_form{
display: none;
}
#modal_file_explorer .modal-body{
height: 60vh;
overflow: auto;
padding: 15px 5px;
}
#modal_file_explorer .modal-body{
max-height:70vh;
min-height:40vh;
overflow:auto;
}
#modal_file_explorer .dir-item:nth-child(even){
background-color:#f3f3f3;
}
#modal_file_explorer .dir-item:hover{
background-color:#cccccc;
cursor:pointer;
color: #333;
}
#modal_file_explorer .dir-item{
padding: 5px;
}
.dir-item .fa{
margin-right:5px;
}
.directory-selector-btn{
display:flex;
}
.dir-sel-btn .fa{
font-size: 2rem;
margin-right: 5px;
}
.dir-sel-btn{
display: flex;
align-items: center;
}
.nodejs-footer{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10px;
padding-top: 5px;
border-top: 1px solid #e6e6e6;
}
#dirsel-container{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
/* border: 1px solid #999; */
direction: rtl;
text-align: left;
line-height: 1.5rem;
padding: 0px;
display: inline-block;
margin-bottom: 0px;
}
#dir_list{
padding-bottom: 10px;
}
.modal-body{
font-size: 1.8rem;
}
.modal-body h5{
font-size: 1.4rem;
}
.modal-header h5{
font-size: 1.6rem;
}
#nodejs_loader_window .table_cron_loader{
background-color: #fff;
height: 40rem;
flex-direction: column;
}
#nodejs_loader_window h4{
font-size: 1.8rem;
margin-top: 2rem;
}
#_nodejs_accordion_apps{
margin-bottom: 0px;
}
#_nodejs_accordion_apps .panel-default:not(:first-child){
margin-top: 20px;
}
#modal_nodejs_app_log .modal-body{
padding: 0px;
}
#modal_nodejs_app_log .action-loader{
flex-direction: column;
}
.action-loader{
height: 40vh;
display: flex;
align-items: center;
justify-content: center;
}
.action-loader .fa{
color: #3399cc;
font-size: 4rem;
}
#_npm_install_log_container_log,
#nodejs_app_log_container{
height: 40vh;
overflow: auto;
background-color: #333;
color: #fff;
padding: 5px;
font-size: 1.2rem;
}
#nodejs_app_log_container p,
#_npm_install_log_container_log p{
margin-bottom: 0px;
}
#nodejs_app_log_container p:focus,
#_npm_install_log_container_log p:focus{
outline: none;
}
.nodejs-app-loger-controls{
display: flex;
align-items: center;
margin-bottom: 0px;
border-bottom: 1px solid #e8e8e8;
padding: 0px 20px 5px;
}
.nodejs-app-loger-controls select{
width: 70px;
margin: auto 1rem;
}
.nodejs-app-loger-controls .btn{
margin-left: 1rem;
}
.text-running{
color: #1ab394;
}
.dataTables_wrapper{
padding-bottom: 0px;
}
#nodejs_app_quick_actions_container{
display: none;
margin-bottom: 10px;
}
#nodejs_app_quick_actions_container.is-running .btn-success,
#nodejs_app_quick_actions_container .btn-danger,
#nodejs_app_quick_actions_container .btn-default{
display: none;
}
#nodejs_app_quick_actions_container.is-running .btn-danger,
#nodejs_app_quick_actions_container.is-running .btn-default{
display: initial;
}
#nodejs_app_quick_actions_container .btn{
margin-right: 10px;
}
#nodejs_app_quick_actions_container .fa{
margin-right: 5px;
}
.ibox-content{
padding: 15px;
}
.error-field,
.error-span {
font-size: 13px;
color: #FF0000;
font-weight: 500;
}
#modal_file_explorer .action-loader{
flex-direction: column;
}
.nodejs-not-available{
min-height: 20rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.nodejs-not-available .fa{
font-size: 5rem;
}
.nodejs-not-available h4{
font-size: 2rem;
}
.mail-contracted{
min-width: 20vw;
top:-7.9rem;
width: auto;
}
.deleting_tr{
background-color: #f5f5f566;
color: #e7eaec;
}
.nodejs-empty-list-version{
height: 20vh;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.nodejs-empty-list-version h4{
font-size: 2.5rem;
}
</style>
<div class="row border-bottom white-bg dashboard-header">
{% if mod.fsl == 1 %}
<div class="row alert alert-warning col-lg-12" style="margin-left: 5px; padding-right: 5px;display:{{stflalert}}"
id="alertfl">
<strong>{{langene.GALARTFILEBLOCK}}</strong>
</div>
{% endif %}
<div class="col-lg-10">
<h2>{{langmod.DTITLE}} ({{users}})</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="?">Home</a></li>
<li class="breadcrumb-item active"><strong>Node JS Applications Manager</strong></li>
</ol>
</div>
</div>
<div class="row nodde-js-wrapper">
<div class="col-lg-12">
<div class="row">
{% if mod.mod_installed == 1 and mod.usr_config.user_enabled == 1 and mod.version_count > 0%}
<div class="col-md-12">
{% if mod.apps_quota > -1 %}
{% set appsbar=100/mod.apps_quota*mod.apps_qty %}
{% if appsbar >=26 and appsbar <=50 %}
{% set classbar='progress-bar progress-bar-success' %}
{% elseif appsbar>=51 and appsbar <=75 %}
{% set classbar='progress-bar progress-bar-warning' %}
{% elseif appsbar>75 %}
{% set classbar = 'progress-bar progress-bar-danger' %}
{% else %}
{% set classbar = 'progress-bar' %}
{% endif %}
{% set label_dom = mod.apps_quota %}
{% else %}
{% set appsbar = 0 %}
{% set classbar = 'progress-bar' %}
{% set label_dom = '∞' %}
{% endif %}
<div class="mail-contracted">
<div class="ibox-content">
<ul class="stat-list">
<li id="inddom">
<h2 class="no-margins" id="tldomind">NodeJS apps <span id="apps_used">{{mod.apps_qty}}</span> / {{label_dom|raw}}</h2>
<small>Available / Contracted</small>
<div class="stat-percent">{{appsbar|round}}%</div>
<div id="bardomind" class="progress progress-mini">
<div style="width: {{appsbar|round}}%;" class="{{classbar}}" id="barappspor"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="ibox nodde-js-apps-list" id="nodejs_app_list">
<div class="ibox-title">
<h4>Node JS application list</h4>
{% if (mod.apps_qty < mod.apps_quota) or (mod.apps_quota==-1) %}
{% set swver='' %}
{% else %}
{% set swver='disabled' %}
{% endif %}
<button onclick="showNodeJSForm()" id="_btn_add_app_" {{swver}} style="font-size:90%" class="btn btn-success">
<i class="fa fa-plus"></i>
Add new applicatiom
</button>
</div>
<div class="ibox-content" id="table_nodejs_apps_container">
<div class="table_cron_loader"><span><i class="fa fa-circle-o-notch fa-spin"></i></span></div>
</div>
</div>
<div class="ibox nodde-js-apps-list" id="nodejs_form_window">
<div class="ibox-title">
<h4 id="_nodejs_form_title"></h4>
<div style="font-size: 90%;">
<button class="btn btn-warning btn-cancel-app" onclick="cancelNodeJSForm()">
<i class="fa fa-ban"></i>
{{langmod.LABNODEJS11}}
</button>
<button class="btn-save-app btn btn-success" onclick="saveNewNodeJSApp()">
<i class="fa fa-floppy-o"></i>
{{langmod.LABNODEJS38}}
</button>
</div>
</div>
<div class="ibox-content">
<div id="nodejs_app_quick_actions_container">
<button class="btn btn-sm btn-warning" id="_npm_install_btn_form" onclick="npmInstallNodeJSApp(this)"><i
class="fa fa-angle-right"></i>{{langmod.LABNODEJS39}}</button>
<button class="btn btn-sm btn-danger" onclick="nodeJSAppStatusInForm(this,'stop')"><i
class="fa fa-stop"></i>{{langmod.LABNODEJS40}}</button>
<button class="btn btn-sm btn-success" onclick="nodeJSAppStatusInForm(this,'start')"><i
class="fa fa-play"></i>{{langmod.LABNODEJS41}}</button>
<button class="btn btn-sm btn-default" onclick="nodeJSAppStatusInForm(this,'restart')"><i
class="fa fa-refresh"></i>{{langmod.LABNODEJS42}}</button>
<button class="btn btn-sm btn-info" onclick="nodeJSAppViewLogInForm(this,'restart')"><i
class="fa fa-file-text-o "></i>{{langmod.LABNODEJS43}}</button>
</div>
<div class="panel-group" id="_nodejs_accordion_apps">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapse_gen_settins">{{langmod.LABNODEJS44}}</a>
<input type="hidden" id="_nodejs_app_form_type">
</h4>
</div>
<div id="collapse_gen_settins" class="panel-collapse collapse in">
<div class="row row-app-form">
<div class="col-md-4">
<label for="">{{langmod.LABNODEJS45}}: <small class="required-asterisk">*</small></label>
</div>
<div class="col-md-8" id="_nodejs_app_form_node">
<select class="form-control" name="" id="">
<option value="" id=""></option>
</select>
</div>
</div>
<div class="row row-app-form">
<div class="col-md-4">
<label for="">{{langmod.LABNODEJS46}}: <small class="required-asterisk">*</small></label>
<small>{{langmod.LABNODEJS47}}</small>
</div>
<div class="col-md-8">
<input type="text" class="form-control nodejs-req" data-required="true" name="" placeholder="{{langmod.LABNODEJS48}}"
id="_nodejs_app_desc_name">
</div>
</div>
<div class="row row-app-form">
<div class="col-md-4">
<label for="">{{langmod.LABNODEJS49}}: <small class="required-asterisk">*</small></label>
<small>{{langmod.LABNODEJS50}}</small>
</div>
<div class="col-md-8">
<select class="form-control" name="" id="_nodejs_app_mode">
<option value="development">{{langmod.LABNODEJS51}}</option>
<option value="production">{{langmod.LABNODEJS52}}</option>
</select>
</div>
</div>
<div class="row row-app-form">
<div class="col-md-4">
<label for="">{{langmod.LABNODEJS53}}: <small class="required-asterisk">*</small></label>
<small>{{langmod.LABNODEJS54}}:</small>
</div>
<div class="col-md-8 nodejs-app-path-selector" id="_nodejs_path_wrapper">
<div id="_nodejs_path_selector_wrapper">
<span class="btn btn-white dir-sel-btn" data-toggle="tooltip" data-placement="bottom" title=""
onclick="showExplorer()" data-original-title="{{langmod.LABNODEJS55}}">
<i class="fa fa-home" aria-hidden="true"></i>
<div id="dirsel-container">/home/{{users}}<span id="dirsel">/</span></div>
</span>
</div>
<!-- <input type="text" class="form-control" name="" id="dirdel_extra_path"> -->
</div>
</div>
<div class="row row-app-form">
<div class="col-md-4">
<label for="">{{langmod.LABNODEJS56}}: <small class="required-asterisk">*</small></label>
</div>
<div class="col-md-8">
<input type="text" class="form-control nodejs-req" data-required="true" name="" placeholder="index.js"
id="_nodejs_app_start_file">
</div>
</div>
<div class="row row-app-form">
<div class="col-md-4">
<label for="">URL:</label>
<small>{{langmod.LABNODEJS59}}</small>
</div>
<div class="col-md-8 nodejs-url-selector">
<div id="nodejs_url_selector_select">
</div>
<input type="hidden" id="_nodejs_form_domain_selected_" value="">
<!-- <span class="nodejs-url-selector-separator">/</span>
<input type="text" class="form-control" style="width: 38%;" placeholder="myawesomeapp" name="" id="_nodejs_app_uri">
<span class="nodejs-url-selector-separator">:</span> -->
<!-- <div class="nodejs-app-port-info">
<span class="fa-stack" data-placement="top" data-toggle="tooltip" title="{{langmod.LABNODEJS57}}">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-info fa-stack-1x fa-inverse"></i>
</span>
<label for="">{{langmod.LABNODEJS58}}</label>
</div> -->
<!-- <div class="nodejs-url-selector-input">
<input type="text" maxlength="5" onkeypress="return isNumber(event)" class="form-control"
placeholder="4200" name="" id="_nodejs_app_port">
</div> -->
</div>
</div>
<div class="row row-app-form">
<div class="col-md-12">
<label for=""><small class="required-asterisk">*</small> {{langmod.LABNODEJS60}}</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" id="_nodejs_envvars_collapse" data-toggle="collapse"
href="#_nodejs_collapse_env_settings">{{langmod.LABNODEJS61}}</a>
</h4>
</div>
<div id="_nodejs_collapse_env_settings" class="panel-collapse collapse">
<div id="_filled_envars_nodejs_form">
<div class="row row-app-form" id="_nodejs_envars_list_header">
<div class="col-md-5">
<label for="">{{langmod.LABNODEJS62}}</label>
</div>
<div class="col-md-5">
<label for="">{{langmod.LABNODEJS63}}</label>
</div>
<div class="col-md-2">
</div>
</div>
<div id="_nodejs_envars_list_container">
</div>
</div>
<div id="_nofilled_envars_nodejs_form" class="nodejs-empty-env-vars">
<button onclick="addInitialEnvVar()" class="btn btn-success">{{langmod.LABNODEJS91}}</button>
</div>
</div>
</div>
</div>
</div>
<div class="ibox-footer">
<div class="text-right">
<button type="button" class="btn btn-warning btn-cancel-app" onclick="cancelNodeJSForm()"><i
class="fa fa-ban" aria-hidden="true"></i> {{langmod.LABNODEJS11}}</button>
<button type="button" class="btn-save-app btn btn-success" onclick="saveNewNodeJSApp()"><i class="fa fa-floppy-o" aria-hidden="true"></i>
<span class="btn-cwp-tag"></span>{{langmod.LABNODEJS38}}</span>
</button>
</div>
</div>
</div>
<div id="nodejs_loader_window">
<div class="table_cron_loader"><span><i class="fa fa-circle-o-notch fa-spin"></i></span>
<h4>Loading application information.</h4>
</div>
</div>
</div>
{% else %}
<div class="col-md-12">
<div class="ibox nodde-js-apps-list" id="">
<!-- <div class="ibox-title">
<h4>Node JS application list</h4>
<button onclick="showNodeJSForm()" style="font-size:90%" class="btn btn-success">
<i class="fa fa-plus"></i>
Add new applicatiom
</button>
</div> -->
<div class="ibox-content">
<div class="nodejs-not-available">
<i class="fa fa-ban text-danger"></i>
<h4>Node Js not available, please contact admin for more information.</h4>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="modal fade" id="modal_nodejs_app_log" tabindex="-1" role="dialog" aria-labelledby="videoModal"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="modal_nodejs_app_log_title" class="nodejs-modal-title modal-title text-center">
{{langmod.LABNODEJS13}}
</h5>
</div>
<div class="modal-body">
<div class="action-loader" id="nodejs_app_log_loader">
<span><i class="fa fa-circle-o-notch fa-spin"></i></span>
<h5>{{langmod.LABNODEJS14}}</h5>
</div>
<div id="nodejs_app_log_wrapper">
<div>
<h5 class="nodejs-app-loger-controls">{{langmod.LABNODEJS15}}
<select name="" class="form-control" id="_nodejs_app_logger_lines_qty">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
{{langmod.LABNODEJS16}}
<button id="_nodejs_app_logger_refresh_btn" onclick="refeshNodeJSAppLog(this)"
class="btn btn-default btn-md"><i class="fa fa-refresh"></i>
{{langmod.LABNODEJS132}}</button>
</h5>
</div>
<div id="nodejs_app_log_container">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" id="">
<i class="fa fa-ban" aria-hidden="true"></i>
{{langmod.LABNODEJS17}}
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_file_explorer" tabindex="-1" role="dialog" aria-labelledby="videoModal"
aria-hidden="true">
<div class="modal-dialog" style="width: 500px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="nodejs-modal-title modal-title text-center">
{{langmod.LABNODEJS26}}
</h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" disabled class="btn btn-success btn-block disabled" id="sel_path_btn"
onclick="selCurrentPath()">
<i class="fa fa-thumb-tack" aria-hidden="true"></i> {{langmod.LABNODEJS27}}
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_app_delete_confirm" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog" style="width: 500px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="nodejs-modal-title modal-title text-center">
{{langmod.LABNODEJS28}}
</h5>
</div>
<div class="modal-body">
<h5>{{langmod.LABNODEJS29}}</h5>
<p id="confirm_app_delete_name"></p>
<h5>{{langmod.LABNODEJS24}}</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" id="">
<i class="fa fa-ban" aria-hidden="true"></i>
{{langmod.LABNODEJS17}}
</button>
<button id="_nodejs_app_confirm_del_btn" class="btn btn-success">
<i class="fa fa-check-circle" aria-hidden="true"></i>
{{langmod.LABNODEJS25}}
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_npm_install_log" tabindex="-1" role="dialog" aria-labelledby="videoModal"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="nodejs-modal-title modal-title text-center">
{{langmod.LABNODEJS13}}
</h5>
</div>
<div class="modal-body">
<div class="action-loader" id="_npm_install_log_loader">
<span><i class="fa fa-circle-o-notch fa-spin"></i></span>
<h5>{{langmod.LABNODEJS18}}</h5>
</div>
<div id="_npm_install_log_container">
<div id="_npm_install_log_loading">
<div class="nodejs-loader">
<div class="nodejs-loader-bar"></div>
<div class="nodejs-loader-bar"></div>
<div class="nodejs-loader-bar"></div>
</div>
</div>
<div id="_npm_install_log_container_log">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" id="">
<i class="fa fa-ban" aria-hidden="true"></i>
{{langmod.LABNODEJS17}}
</button>
</div>
</div>
</div>
</div> |