614 lines
15 KiB
JavaScript
614 lines
15 KiB
JavaScript
var m_ProfileItem;
|
|
|
|
var FilamentPriority = new Array( "pla","abs","pet","tpu","pc");
|
|
var VendorPriority = new Array("generic");
|
|
|
|
function RequestProfile()
|
|
{
|
|
var tSend={};
|
|
tSend['sequence_id']=Math.round(new Date() / 1000);
|
|
tSend['command']="request_userguide_profile";
|
|
|
|
SendWXMessage( JSON.stringify(tSend) );
|
|
}
|
|
|
|
function GetFilamentShortname( sName )
|
|
{
|
|
let sShort=sName.split('@')[0].trim();
|
|
|
|
return sShort;
|
|
}
|
|
|
|
function SortUI()
|
|
{
|
|
var ModelList=new Array();
|
|
|
|
let nMode=m_ProfileItem["model"].length;
|
|
for(let n=0;n<nMode;n++)
|
|
{
|
|
let OneMode=m_ProfileItem["model"][n];
|
|
|
|
if( OneMode["nozzle_selected"]!="" )
|
|
ModelList.push(OneMode);
|
|
}
|
|
|
|
//model
|
|
let HtmlMode='';
|
|
nMode=ModelList.length;
|
|
for(let n=0;n<nMode;n++)
|
|
{
|
|
let sModel=ModelList[n];
|
|
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
|
|
HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
|
|
}
|
|
|
|
$('#MachineList .CValues').append(HtmlMode);
|
|
$('#MachineList .CValues input').prop("checked",true);
|
|
//if(nMode<=1)
|
|
//{
|
|
// $('#MachineList').hide();
|
|
//}
|
|
|
|
//Filament - Create sorted array with generic vendor first
|
|
let FilamentArray=new Array();
|
|
let GenericFilamentArray=new Array();
|
|
for( let key in m_ProfileItem['filament'] )
|
|
{
|
|
let OneFila=m_ProfileItem['filament'][key];
|
|
if(OneFila['vendor'].toLowerCase() === 'generic')
|
|
GenericFilamentArray.push({key: key, data: OneFila});
|
|
else
|
|
FilamentArray.push({key: key, data: OneFila});
|
|
}
|
|
// Combine arrays with generic filaments first
|
|
let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
|
|
|
|
let HtmlFilament='';
|
|
let SelectNumber=0;
|
|
|
|
var TypeHtmlArray={};
|
|
var VendorHtmlArray={};
|
|
for( let n=0; n<SortedFilamentArray.length; n++ )
|
|
{
|
|
let filamentItem = SortedFilamentArray[n];
|
|
let key = filamentItem.key;
|
|
let OneFila = filamentItem.data;
|
|
|
|
//alert(JSON.stringify(OneFila));
|
|
|
|
let fWholeName=OneFila['name'].trim();
|
|
let fShortName=GetFilamentShortname( OneFila['name'] );
|
|
let fVendor=OneFila['vendor'];
|
|
let fType=OneFila['type'];
|
|
let fSelect=OneFila['selected'];
|
|
let fModel=OneFila['models']
|
|
|
|
let bFind=false;
|
|
//let bCheck=$("#MachineList input:first").prop("checked");
|
|
if( fModel=='')
|
|
{
|
|
// Orca: hide
|
|
bFind=true;
|
|
}
|
|
else
|
|
{
|
|
//check in modellist
|
|
let nModelAll=ModelList.length;
|
|
for(let m=0;m<nModelAll;m++)
|
|
{
|
|
let sOne=ModelList[m];
|
|
|
|
let OneName=sOne['model'];
|
|
let NozzleArray=sOne["nozzle_selected"].split(';');
|
|
|
|
let nNozzle=NozzleArray.length;
|
|
|
|
for( let b=0;b<nNozzle;b++ )
|
|
{
|
|
let nowModel= OneName+"++"+NozzleArray[b];
|
|
if(fModel.indexOf(nowModel)>=0)
|
|
{
|
|
bFind=true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if(bFind)
|
|
{
|
|
//Type
|
|
let LowType=fType.toLowerCase();
|
|
if(!TypeHtmlArray.hasOwnProperty(LowType))
|
|
{
|
|
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
|
|
let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" /><span>'+fType+'</span></label>';
|
|
|
|
TypeHtmlArray[LowType]=HtmlType;
|
|
}
|
|
|
|
//Vendor
|
|
let lowVendor=fVendor.toLowerCase();
|
|
if(!VendorHtmlArray.hasOwnProperty(lowVendor))
|
|
{
|
|
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
|
|
let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
|
|
|
|
VendorHtmlArray[lowVendor]=HtmlVendor;
|
|
}
|
|
|
|
//Filament
|
|
let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
|
|
if(pFila.length==0)
|
|
{
|
|
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
|
|
let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'" filatype="'+fType+'" filalist="'+fWholeName+';'+'" model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
|
|
|
|
$("#ItemBlockArea").append(HtmlFila);
|
|
}
|
|
else
|
|
{
|
|
let strModel=pFila.attr("model");
|
|
let strFilalist=pFila.attr("filalist");
|
|
|
|
if(strModel == '' || fModel == '')
|
|
pFila.attr("model", '');
|
|
else
|
|
pFila.attr("model", strModel+fModel);
|
|
|
|
pFila.attr("filalist", strFilalist+fWholeName+';');
|
|
}
|
|
|
|
if(fSelect*1==1)
|
|
{
|
|
//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
|
|
|
|
$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
|
|
SelectNumber++;
|
|
}
|
|
// else
|
|
// $("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);
|
|
}
|
|
}
|
|
|
|
//Sort TypeArray
|
|
let TypeAdvNum=FilamentPriority.length;
|
|
for( let n=0;n<TypeAdvNum;n++ )
|
|
{
|
|
let strType=FilamentPriority[n];
|
|
|
|
if( TypeHtmlArray.hasOwnProperty( strType ) )
|
|
{
|
|
$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
|
|
delete( TypeHtmlArray[strType] );
|
|
}
|
|
}
|
|
for(let key in TypeHtmlArray )
|
|
{
|
|
$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
|
|
}
|
|
$("#FilatypeList .CValues input").prop("checked",true);
|
|
|
|
//Sort VendorArray
|
|
let VendorAdvNum=VendorPriority.length;
|
|
for( let n=0;n<VendorAdvNum;n++ )
|
|
{
|
|
let strVendor=VendorPriority[n];
|
|
|
|
if( VendorHtmlArray.hasOwnProperty( strVendor ) )
|
|
{
|
|
$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
|
|
delete( VendorHtmlArray[strVendor] );
|
|
}
|
|
}
|
|
for(let key in VendorHtmlArray )
|
|
{
|
|
$("#VendorList .CValues").append( VendorHtmlArray[key] );
|
|
}
|
|
$("#VendorList .CValues input").prop("checked",true);
|
|
|
|
if(SelectNumber==0)
|
|
ChooseDefaultFilament();
|
|
|
|
UpdateStats();
|
|
}
|
|
|
|
function ChooseAllMachine()
|
|
{
|
|
let bCheck=$("#MachineList input:first").prop("checked");
|
|
|
|
$("#MachineList input").prop("checked",bCheck);
|
|
|
|
SortFilament();
|
|
}
|
|
|
|
function MachineClick()
|
|
{
|
|
let nChecked=$("#MachineList input:gt(0):checked").length
|
|
let nAll =$("#MachineList input:gt(0)").length
|
|
|
|
if(nAll==nChecked) {
|
|
$("#MachineList input:first").prop("checked",true);
|
|
}
|
|
else {
|
|
$("#MachineList input:first").prop("checked",false);
|
|
}
|
|
|
|
SortFilament();
|
|
}
|
|
|
|
function ChooseAllFilament()
|
|
{
|
|
let bCheck=$("#FilatypeList input:first").prop("checked");
|
|
$("#FilatypeList input").prop("checked",bCheck);
|
|
|
|
SortFilament();
|
|
}
|
|
|
|
|
|
function FilaClick()
|
|
{
|
|
let nChecked=$("#FilatypeList input:gt(0):checked").length
|
|
let nAll =$("#FilatypeList input:gt(0)").length
|
|
|
|
if(nAll==nChecked) {
|
|
$("#FilatypeList input:first").prop("checked",true);
|
|
}
|
|
else {
|
|
$("#FilatypeList input:first").prop("checked",false);
|
|
}
|
|
|
|
SortFilament();
|
|
}
|
|
|
|
function ChooseAllVendor()
|
|
{
|
|
let bCheck=$("#VendorList input:first").prop("checked");
|
|
$("#VendorList input").prop("checked",bCheck);
|
|
|
|
SortFilament();
|
|
}
|
|
|
|
function VendorClick()
|
|
{
|
|
let nChecked=$("#VendorList input:gt(0):checked").length
|
|
let nAll =$("#VendorList input:gt(0)").length
|
|
|
|
if(nAll==nChecked) {
|
|
$("#VendorList input:first").prop("checked",true);
|
|
}
|
|
else {
|
|
$("#VendorList input:first").prop("checked",false);
|
|
}
|
|
|
|
SortFilament();
|
|
}
|
|
|
|
function SortFilament()
|
|
{
|
|
let FilaNodes=$("#ItemBlockArea .MItem");
|
|
let nFilament=FilaNodes.length;
|
|
//$("#ItemBlockArea .MItem").hide();
|
|
|
|
//ModelList
|
|
let pModel=$("#MachineList input:checked");
|
|
let nModel=pModel.length;
|
|
let ModelList=new Array();
|
|
for(let n=0;n<nModel;n++)
|
|
{
|
|
let OneModel=pModel[n];
|
|
|
|
let mName=OneModel.getAttribute("mode");
|
|
if( mName=='all' )
|
|
{
|
|
continue;
|
|
}
|
|
else
|
|
{
|
|
let mNozzle=OneModel.getAttribute("nozzle");
|
|
let NozzleArray=mNozzle.split(';');
|
|
|
|
for( let bb=0;bb<NozzleArray.length;bb++ )
|
|
{
|
|
let NewModel='['+mName+'++'+NozzleArray[bb]+']';
|
|
|
|
ModelList.push( NewModel );
|
|
}
|
|
}
|
|
}
|
|
|
|
//TypeList
|
|
let pType=$("#FilatypeList input:gt(0):checked");
|
|
let nType=pType.length;
|
|
let TypeList=new Array();
|
|
for(let n=0;n<nType;n++)
|
|
{
|
|
let OneType=pType[n];
|
|
TypeList.push( OneType.getAttribute("filatype") );
|
|
}
|
|
|
|
//VendorList
|
|
let pVendor=$("#VendorList input:gt(0):checked");
|
|
let nVendor=pVendor.length;
|
|
let VendorList=new Array();
|
|
for(let n=0;n<nVendor;n++)
|
|
{
|
|
let OneVendor=pVendor[n];
|
|
VendorList.push( OneVendor.getAttribute("vendor") );
|
|
}
|
|
|
|
//Update Filament UI
|
|
for(let m=0;m<nFilament;m++)
|
|
{
|
|
let OneNode=FilaNodes[m];
|
|
let OneFF=OneNode.getElementsByTagName("input")[0];
|
|
|
|
let fModel=OneFF.getAttribute("model");
|
|
let fVendor=OneFF.getAttribute("vendor");
|
|
let fType=OneFF.getAttribute("filatype");
|
|
let fName=OneFF.getAttribute("name");
|
|
|
|
if(TypeList.in_array(fType) && VendorList.in_array(fVendor))
|
|
{
|
|
let HasModel=false;
|
|
for(let m=0;m<ModelList.length;m++)
|
|
{
|
|
let ModelSrc=ModelList[m];
|
|
|
|
if( fModel.indexOf(ModelSrc)>=0)
|
|
{
|
|
HasModel=true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(HasModel || fModel=='')
|
|
$(OneNode).show();
|
|
else
|
|
$(OneNode).hide();
|
|
}
|
|
else{
|
|
$(OneNode).hide();
|
|
//alert(fName) //debug non common filament type
|
|
}
|
|
}
|
|
|
|
UpdateStats();
|
|
}
|
|
|
|
function UpdateStats()
|
|
{
|
|
let $i = $("#ItemBlockArea");
|
|
let $allItems = $i.find(".MItem");
|
|
let $visibleItems = $i.find(".MItem:visible");
|
|
let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
|
|
let visibleCount = Math.min($filteredItems.length, $visibleItems.length);
|
|
|
|
$(".list-item-count").text(
|
|
$i.find("input:checked").length + " / " +
|
|
$allItems.length +
|
|
($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
|
|
);
|
|
}
|
|
|
|
function SelectAllFilament( nShow )
|
|
{
|
|
// ORCA add ability to only select / unselect filted items
|
|
if (document.querySelector('.cbr-filter-bar').value) {
|
|
$('#ItemBlockArea .MItem:visible input')
|
|
.filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'})
|
|
.prop("checked", nShow != 0);
|
|
}
|
|
else {
|
|
$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
|
|
}
|
|
|
|
UpdateStats();
|
|
}
|
|
|
|
function ShowNotice( nShow )
|
|
{
|
|
if(nShow==0) {
|
|
$("#NoticeMask").hide();
|
|
$("#NoticeBody").hide();
|
|
}
|
|
else {
|
|
$("#NoticeMask").show();
|
|
$("#NoticeBody").show();
|
|
}
|
|
}
|
|
|
|
function ChooseDefaultFilament()
|
|
{
|
|
//ModelList
|
|
let pModel=$("#MachineList input:gt(0)");
|
|
let nModel=pModel.length;
|
|
let ModelList=new Array();
|
|
for(let n=0;n<nModel;n++)
|
|
{
|
|
let OneModel=pModel[n];
|
|
ModelList.push( OneModel.getAttribute("mode") );
|
|
}
|
|
|
|
//DefaultMaterialList
|
|
let DefaultMaterialString = "";
|
|
let nMode=m_ProfileItem["model"].length;
|
|
for(let n=0;n<nMode;n++)
|
|
{
|
|
let OneMode=m_ProfileItem["model"][n];
|
|
let ModeName=OneMode['model'];
|
|
let DefaultM=OneMode['materials'];
|
|
|
|
if( ModelList.indexOf(ModeName)>-1 )
|
|
{
|
|
DefaultMaterialString+=OneMode['materials']+';';
|
|
}
|
|
}
|
|
|
|
let DefaultMaterialArray=DefaultMaterialString.split(';');
|
|
//alert(DefaultMaterialString);
|
|
|
|
//Filament
|
|
let FilaNodes=$("#ItemBlockArea .MItem");
|
|
let nFilament=FilaNodes.length;
|
|
for(let m=0;m<nFilament;m++)
|
|
{
|
|
let OneNode=FilaNodes[m];
|
|
let OneFF=OneNode.getElementsByTagName("input")[0];
|
|
$(OneFF).prop("checked",false);
|
|
|
|
let filamentList=GetFilamentShortname(OneFF.getAttribute("filalist"));
|
|
//alert(filamentList);
|
|
let filamentArray=filamentList.split(';')
|
|
|
|
let HasModel=false;
|
|
let NowFilaLength=filamentArray.length;
|
|
for(let p=0;p<NowFilaLength;p++)
|
|
{
|
|
let NowFila=filamentArray[p];
|
|
|
|
if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
|
|
{
|
|
HasModel=true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(HasModel)
|
|
$(OneFF).prop("checked",true);
|
|
}
|
|
|
|
ShowNotice(0);
|
|
|
|
UpdateStats();
|
|
}
|
|
|
|
function ResponseFilamentResult()
|
|
{
|
|
let FilaSelectedList= $("#ItemBlockArea input:checked");
|
|
let nAll=FilaSelectedList.length;
|
|
|
|
if( nAll==0 )
|
|
{
|
|
ShowNotice(1);
|
|
return false;
|
|
}
|
|
|
|
let FilaArray=new Array();
|
|
for(let n=0;n<nAll;n++)
|
|
{
|
|
let strFilalist=FilaSelectedList[n].getAttribute("filalist");
|
|
if(strFilalist) {
|
|
let filaNames = strFilalist.split(';');
|
|
for(let i=0; i<filaNames.length; i++) {
|
|
let fname = filaNames[i].trim();
|
|
if(fname !== '')
|
|
FilaArray.push(fname);
|
|
}
|
|
}
|
|
}
|
|
|
|
var tSend={};
|
|
tSend['sequence_id']=Math.round(new Date() / 1000);
|
|
tSend['command']="save_userguide_filaments";
|
|
tSend['data']={};
|
|
tSend['data']['filament']=FilaArray;
|
|
|
|
SendWXMessage( JSON.stringify(tSend) );
|
|
|
|
return true;
|
|
}
|
|
|
|
function addClearBtnEvents(el){
|
|
el.addEventListener('click', e => {
|
|
if (el.getAttribute("onclear") == "1") {
|
|
el.value = '';
|
|
el.dispatchEvent(new Event('input', {bubbles: true}));
|
|
}
|
|
});
|
|
el.addEventListener('mousemove', e => {
|
|
const rc = el.getBoundingClientRect();
|
|
const onRight = el.value && (e.clientX - rc.left > rc.width - 32);
|
|
el.setAttribute("onclear", onRight ? "1" : "0");
|
|
});
|
|
el.addEventListener('mouseleave', e => {
|
|
el.setAttribute("onclear", "0");
|
|
});
|
|
}
|
|
|
|
function initInputEvents(){
|
|
document.querySelectorAll('.cbr-search-bar').forEach(searchBar => {
|
|
searchBar.addEventListener('input', function() {
|
|
const search = this.value.trim().toLowerCase(),
|
|
list = this.closest('.cbr-column').querySelector('.cbr-content'),
|
|
items = list.querySelectorAll('label');
|
|
let hidden = 0;
|
|
|
|
items.forEach((item, i) => {
|
|
if(i == 0){
|
|
item.style.display ="block";
|
|
return;
|
|
};
|
|
const text = item.querySelector("span").textContent.toLowerCase();
|
|
const hide = search && !text.includes(search);
|
|
item.style.display = hide ? "none" : "block";
|
|
if(hide) hidden++;
|
|
});
|
|
|
|
if(items.length - hidden == 1){
|
|
items[0].style.display = "none";
|
|
hidden++;
|
|
}
|
|
|
|
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
|
|
});
|
|
addClearBtnEvents(searchBar);
|
|
});
|
|
|
|
const filterBar = document.querySelector('.cbr-filter-bar');
|
|
const filterModeFilter = document.querySelector('.cbr-filter-mode-filter' );
|
|
const filterModeVisible = document.querySelector('.cbr-filter-mode-visible');
|
|
|
|
filterBar.addEventListener('input', function() {
|
|
const search = this.value.trim().toLowerCase();
|
|
const list = this.closest('.cbr-column').querySelector('.cbr-content');
|
|
const items = list.querySelectorAll('label');
|
|
let hidden = 0;
|
|
|
|
filterModeFilter.style.display = search ? "block" : "none";
|
|
filterModeVisible.style.display = search ? "none" : "block";
|
|
|
|
const showSel = search == "::checked";
|
|
const showUnsel = search == "::unchecked";
|
|
|
|
if(showSel || showUnsel){
|
|
items.forEach(item => {
|
|
const cb = item.querySelector("input");
|
|
const hide = showSel ? !cb.checked : cb.checked;
|
|
item.style.position = hide ? "absolute" : "unset";
|
|
if(hide) hidden++;
|
|
});
|
|
}
|
|
else {
|
|
items.forEach(item => {
|
|
const text = item.querySelector("span").textContent.toLowerCase();
|
|
const hide = search && !text.includes(search);
|
|
item.style.position = hide ? "absolute" : "unset";
|
|
if(hide) hidden++;
|
|
});
|
|
}
|
|
|
|
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
|
|
|
|
UpdateStats();
|
|
});
|
|
addClearBtnEvents(filterBar);
|
|
|
|
document.querySelector('#filter-tags').addEventListener('change', e => {
|
|
let v = e.target.value;
|
|
filterBar.value = v == "1" ? "::checked" : "::unchecked";
|
|
filterBar.dispatchEvent(new Event('input', {bubbles: true}));
|
|
filterBar.focus();
|
|
e.target.value = 0; // reset back to make dropdown items always selectable
|
|
});
|
|
} |