Komponensek

Egyedi OEEm komponensek

3rd party komponensek

view/common mappában lévő komponensek

deleteWindow

Egy elem törlésének megerősítésére létrehozott ablak. Feladata, hogy a törlésre jelölt elemet a triggerURL paraméterrel együtt beküldje a kiszolgálónak törlésre. Amennyiben a kiszolgáló visszautasítja a törlést foreign-key ütközésre hivatkozva úgy azt az előbbiekben elküldött triggerUrl-re irányítva közli. Ezek után el lehet rejteni a rekordot, de ez már nem az ablak hatáskörébe tartozik.

Az ablak általában közvetetten van használva, egy showDelete javascript függvény segítségével. Ezt a függvényt az adattáblák action oszlopának törlés gombjai hívják meg.

Mivel ez egy speciális törlési folyamat része ezért általános felhasználása készítsünk egy egyedi modal ablakot. Speciális, mivel a triggerURL paraméter megadása mellett szükség van egy triggerVisibility végződésű route-ra is és a hozzá tartozó controllerben egy triggerVisibility függvényre is.

dropDowns

Rendszerszintű dropdownok, minden ami a webes alkalmazás keretéhez tartozik itt van. 

headIncludes

A webes alkalmazás működéséhez szükséges könytárak és stílusok. Későbbiekben érdemes ezeket webpack segítéségével egy dátummal ellátott vendor.js fájl-ba tömöríteni.

helpWindow

Súgó ablak. Dokumentációból származó szöveg megjelenítésére szolgál. A felhasználói dokumentációnak speciális kialakítása van 4, a kódban jól elkülöníthető azonosítóval ellátott szekcióval:

• Általános leírás, ismertető szekció. (azonosítója: #oeemDescription)
• Mező szekció. Az adott oldalon fellelhető mezők pontos leírása. (azonosítója: #oeemFields)
• Műveletek szekció. (azonosítója: #oeemMethods)
• Referenciák szekció. Az adott témához köthető további témák. (azonosítója: #oeemReferences)

Ezekkel a szekciókkal, rendezetten tölti fel a helpWindow-ban található modális ablak tartalmát és címsávját. Amennyiben nincs elérhető dokumentáció a szintén itt található "Dokumentáció nem elérhető" tartalommal törli fel az ablakot.

Az ablak meghívása a getHelpContent javascriptes függvény segítségével történik. Amennyiben csak a dokumentáció szöveges tartalmát szeretnénk megkapni úgy azt a returnHelpContent függvény segítségével tehetjük.

notifications

(inline) Figyelmezető üzenetetek. Bootstrap mintájára készített sablonok, továbbá egyedi üzenetek mint a foreign-key ütközés törléskor illetve Laravel form validációs hibaüzenetek. Hibaüzenetek listája:

• Foreign-key törlés hiba
• Laravel form validációs hibák
• Success kategóriájú üzenetek
• Primary kategóriájú üzenetek
• Warning kategóriájú üzenetek
• Danger kategóriájú üzenetek
• Info kategóriájú üzenetek

Használatuk egyszerű. A Controller visszatérési részében ahol a view-al térünk vissza hozzá kell csatolni egy session/kulcs értéket is:

return redirect("admin/computer/{$CMNAME}")->with('notification-success', __('responses.new'));
//vagy
return returnFn("modules.admin.datalogger.index")->with('notification-warning', __('responses.update'));
//vagy
return view("modules.admin.datalogger.index")->with('notification-info', _i('Informácó üzenet.'));

pdfDownloadWindow

IOS készülékeken csak linken keresztül lehet letöltést indítani, így pdf fájl letöltésekor ez az ablak jön fel a fájlra mutató linkel.

realtime-debug és realtime-debug-index

sr_realtime_data tárolt eljárást ellenőrző oldal. Pontosan kielemezhető, hogy milyen számokból lett a végső OEE szám kiszámolva.

systemRebootWindow

Amennyiben rendszer újraindításra van szükség ezzel az ablakkal ütemezni lehet egy esetleges újraindítást illetve azonnal is végrehajtható.

updateWindowOffline

Rendszer frissítést lehet online és offline végezni. Offline esetében egy frissítő fájl kell feltölteni ezen az ablakon keresztül.

updateWindowOnline

Ez az ablak már nincs használva.

modules/_components mappában lévő komponensek

datatable/triggerHiddenButton

DataTables gomb. Rejtett rekordok elrejtésére/megjelenítésére szolgál. Amennyiben a táblázat tartalmaz rejtett elemeket ezzel a gombbal felfedhetjük azokat.

Form inputok

Leegyszerűsítik egy űrlap elem hozzáadását az űrlaphoz. Az alábbi segítségeket nyújtja:

• Minden szükséges bootstrap form-group, form-control, label elemet automatikusan beágyaz
• Kötelező -required- mező címke osztályt automatikusan lekezeli a required paraméter átadásakor
• PHP tömbbel paraméterezhető

A komponensek a Laravel Collective könyvtár Form::component függvényével kerülnek regisztrálásra, később a Form objektum statikus metódusaival lehet őket beágyazni. A komponens regisztrációk az alkalmazás bootolásakor futnak le az AppServiceProvider fájl boot metódusában. A komponensekhez szükséges blade sablonok pedig a modules/_components/form mappában találhatók.

Példa az összes elem használatára:

{{--Textarea--}}
Form::bsArea("fieldName", fValue($formValues, "fieldName"), 'col-sm-6')

{{--Checkbox--}}
Form::bsCheckbox("fieldName", fValue($formValues, "fieldName"), 'col-sm-6')

{{--Email--}}
Form::bsEmail("fieldName", fValue($formValues, "fieldName"), 'col-sm-6')

{{--File--}}
Form::bsFile("fieldName", 'col-sm-6')

{{--Multiselect--}}
Form::bsMultiSelect("fieldName", $allItems=['key'=>'Label','key-2'=>'Another label','key-33'=> 'Label text'], $selectedItems=['key-33'=>'Label text', 'key'=>Label], 'col-sm-6')

{{--Number--}}
Form::bsNumber("fieldName", fValue($formValues, "fieldName"), 'col-sm-6')

{{--Password--}}
Form::bsPassword("fieldName", 'col-sm-6')

{{--Radio--}}
Form::bsArea("fieldName", fValue($formValues, "fieldName"), 'col-sm-6')

{{--Select--}}
Form::bsArea("fieldName", $items=["this", "is", "test", "theDefaultValue"], fValue($formValues, "theDefaultValue"), 'col-sm-6')

{{--Text--}}
Form::bsArea("fieldName", fValue($formValues, "fieldName"), 'col-sm-6')

További attribútumokat is lehet definiálni az elemeknek egy php tömb segítségével. Mindig az utolsó paraméter az attribútum tömb:

// ... <input name="username" value="Hardcoded Frank" class="form-control" style="border: red;" required/> ...
Form::bsText('username', 'Hardcoded Frank', 'col-md-12', ['required', 'label'=>'Custom label', 'style'=>'border: red;']);
// ... <input name="username" value="John Doe" class="form-control" />
Form::bsText('username', fValue($savedUser, 'username'), null, ['label'=>'Custom label']);

section/actionTitle

Az oldalak nagy százalékban tartalmaznak "szekciókat". Egy szekció több részből áll:

• Címsáv (.section-title)
• Tartalom (.section-body)
• Művelet sáv (.section-actions)

A címsáv egyes esetekben csak egy címet tartalmaz de sok esetben egy művelet gombot is továbbá egy súgó linket is mely az adott tartalomra mutat. Az utóbbi esetben sok ismétlődő kód szükséges ezért ezeket az ismétlődéséket ki lehet szűrni az actionTitle komponenssel. A komponens paraméterei az alábbiak:

• title - Címsávban megjelenítendő cím
• newTitle - Új hozzáadása gomb felirata
• url - Relatív url melyhez hozzá fűzi automatikusan a /create stringet (pl.: adatgyűjtók esetében ez admin/dataloggers amiből később admin/dataloggers/create lesz)
• helpUrl - Dokumenctáció ide mutató linkja

<div class="section">
    {{--Művelet section címsáv--}}
    @include('modules._components.section.actionTitle', ['title'=>_i('Adatgyűjtők'), 'newTitle'=>_i('Új adatgyűjtő'), 'url'=>'admin/dataloggers','helpUrl'=>'rendszer-kezeles/webes-kezelo-felulet/adminisztracio/adatgyujtok'])
    ...
</div>

dualList

Ha egy listából több elemet hozzá szeretnénk rendelni egy másik listához ez a komponens volt használva. Azonban ezt ki fogja váltani a MultiSelect komponens. Használata a következő kóddal lehetséges ahol az assigneds és unassigneds asszociatív tömböknek rendelkeznie kell egy id és egy name kulcsal:

@include('modules._components.dualList',[
    'id'=>'userGroups',
    'baseUrl'=>url("admin/users/{$USIDEN}/group"),
    'columns'=>[["id"=>"UGIDEN", "name"=>"UGIDEN", "visible"=>false],["id"=>"UGNAME", "name"=>_i('Csoport neve')]],
    'assigneds'=>$userGroups,
    'unassigneds'=>$availableGroups,
    'readOnly'=>!hasRight('USER',2)
])

infoTooltip

realtimedata oldalon magyarázatként használt tooltip. Használata:

 @include('modules._components.infoTooltip',['info'=>'Tooltip szövege'])

modal

Általános célra készített modal ablak.

notification

Figyelmeztetéseket jelenít meg. A korábbi notifications komponens-től a notification abban különbözik, hogy míg az előbbi a session-ből állapítja meg, hogy milyen figyelmeztetést ágyazzon be az oldalba az utóbbit az oldalon ágyazzuk be statikusan.

Használata:

@include('modules._components.notification', ['type'=>'info', 'content'=>_i('Általános információs szöveg.')])

A type változónak csak előre meghatározott értékei vannak ('primary', 'success', 'info', 'warning', 'danger'). 

productQualificationView

Egy minősítési bizonylat adatait jeleníti meg megtekintésre. A controller ami visszadja a view-ot, rendelkeznie kell az alábbi adatokkal:

[ ...
'report' => QUALREPHEAD::with([
    'userdata',
    'shiftdata',
    'workcenterQualifications' => function ($query) {
        $query->with(['workcenter', 'scrapdetails' => function ($query) {
            $query->with('scrapname');
        }]);
     }, 
    'orderhead' => function ($query) {
        $query->with(['product']);
    }])->find($QRIDEN)
... ]

treeView

Egy fa struktúrába rendezi az átadott elemeket. Ha egy elemre rákattintanak megkeresi a hozzá tartozó DOM elemet és megjeleníti. A DOM elem azonosítója az elem ID-ja és egy _body postfix. Pl.: Ha az elem azonosítója a treeViewban 'WC-12' akkor a hozzá tartozó DOM elem 'WC-12_body'.

Egy egyszerű példa a használatára:

1. Controllerben töltsük fel adatokkal majd adjuk át ezt a tömböt a view-nak:

$dataSource= [
    ...
    [ 'id'=>'unique', 'name'=>'string', 'selectable'=>'boolean', 'items'=>[ ..., ['id'=>'unique','name'=>'string'], ... ] ],
    ...
];

2. View-ban ágyazzuk be a treeView kódját. Adjuk meg az azonosítóját és adjuk át az előbbi lépésben készített datasource paramétert neki:

@include('modules._components.treeView',['id'=>'theTreeView','dataSource'=>$dataSource])

3. A treeView-ban lévő elemek számára a megjelenítendő/elrejtendő elemeket hozzuk létre szintén a fenti view fájlban, figyeljünk rá, hogy a létrehozott elem azonosítója megegyezzen a treeViewban lévő elem azonosíttójával és egy _body postfixxel. Tehát ha egy treeView elemnek az id tulajdonságában 99 szerepel akkor a hoizzá tartozó külső elem azonosítója 99_body lesz:

<div id="99_body">
    <p>A megjelenítendő elem tartalma.</p>
</div>

asset/js/component mappában lévő komponensek

Chart3dPie

A MACH kiállításra készült kijelző-re készült 3d pite diagram VueJS komponensként. A resources/assets/js/components/DisplayView-B.vue fájlban látható a használata. Egyszerűen egy elemként kell beágyazni a vuejs komponens template részében, ellátni egy azonosítóval és a change eseményét meghívni a this.$refs.chartAzonositoja.$emit('change', ujErtek); paranccsal.

ChartSolidGauge

A MACH kiállításra készült kijelző-re készült 3d solid gauge diagram. HighchartJS diagram VueJS komponensként.

DisplayView-B

A MACH kiállításra készült kijelző. Bemutatókon szokták mutogatni.

MultiSelect

 Ez a VueJS komponens hivatott kiváltani a régi duallistes komponenseket. Kezelése egyszerű és kis helyet foglal. Nincs szükség más oldalra navigálni ha az értékét meg szeretnénk változtatni.

Használatához 3 lépést kell megtenni:

1. Beágyazunk egy bsMultiSelect elemet az űrlapba:
   

   {{Form::bsMultiSelect("PTIDEN", $printTemplates, $assignedPrintTemplates, "col-md-12", ["label"=>_i('Kísérőlapok')])}}

2. A beágyazott elem bármelyik szülő elemének adunk egy vue-app azonosítót. Ez egy konstans név, ez alapján találja majd meg a VueJS alkalmazás, hogy hol van a multiselect.
   

   <div id="vue-app">

3. A blade view script részébe beágyazzuk a VueComponents fájlt, ami a VueJS komponensek megjelenítését teszik lehetővé.
   

   <script src="{!! asset('dist/VueComponents.js') !!}"></script>

A bsMutliSelect komponens számára két fontos paramétert kell átadnunk.

• Összes hozzárendelhető elem kulcs - érték párjának listája. Pl.: ([1=>'Első elem', 2=> 'Második elem', 3=> 'Harmadik elem'])
• Összes már hozzárendelt elem kulcs - érték párjának listája. Pl.: ([2=> 'Második elem', 3=> 'Harmadik elem']) 

3rd party komponensek, pluginek és könyvtárak

DataTables (Yajra)

composer package: "yajra/laravel-datatables-buttons", "yajra/laravel-datatables-html", "yajra/laravel-datatables-oracle"

dokumentáció: https://yajrabox.com/docs/laravel-datatables/6.0

jQuery DataTables dokumentáció: https://datatables.net/

Ez a rendszer sztenderd adattáblája. Ugyanazt a DataTable jQuery plugin-t használja amit a rendszer is használt az elején csak kiegészíti szerver oldali kiszolgálással és HTML kód generálással. 

vis Timeline

javascript library: "bower_components/vis/dist/vis.js"

CSS: "bower_components/vis/dist/vis-timeline-graph2d.min.css"

dokumentáció: http://visjs.org/docs/timeline/

Az EventTimeline komponens használja.

HighChartJS

javascript library: "./public/offline-highcharts/"

dokumentáció: https://www.highcharts.com/demo/heatmap

Minden diagramot ez a plugin hoz létre. Használva van a kijelzőknél és a kimutatásoknál.

LaravelCollective

composer package: "laravelcollective/html"

A blade fájlokban a Form-okat kezeli. Egyszerűbben és gyorsabban lehet vele űrlapokat készíteni és kezelni.

Activitylog

composer package: "spatie/laravel-activitylog"

Minden felhasználói aktivitást ez a plugin kezel. Az activitylog táblába kerülnek be a log bejegyzések.

Spatie Excel

composer package: "maatwebsite/excel"

Excel fájlok exportjánál van használva. A DataTables plugin is ezt használja, ez a config/datatables-buttons fájl beállításaiban van a pdf_generator bejegyzés alatt. Az "excel" érték ennek a pluginnak a használatát jelenti.

Laravel Gettext

composer package: "Belphemur/laravel-gettext"

A fordításokért felelős plugin. Lehetővée teszi, hogy a fordítandó szövegeket a PoEdit programmal is le tudjuk fordítani/fordíttatni.

Comodojo ZIP

composer package: "comodojo/zip"

A licence szerver és az OEEm alkalmazás egyeránt dolgozik ZIP archívumokkal. A könyvtár az archívumok kezelését könnyíti meg.

Doctrine DBal

composer package: "doctrine/dbal"

Adatbázis migrációkban a meglévő oszlopok módosításánál van szükség erre a pluginra. Bővebben erről a "Modifying columns" szekciónál lehet olvasni.

DOM PDF

composer package: "dompdf/dompdf"

PDF fájlokat genereál.

Laravel debugbar

composer package: "barryvdh/laravel-debugbar"

Amennyiben az .env fájl APP_ENV változójában nem production érték szerepel, a debugbar megjelenik minden oldalon. Sok hasznos információt tartalmaz, így például azt is, hogy milyen lekérdezések futnak le minden oldalon.

Migrations generator

composer package: "xethron/migrations-generator"

Ha van egy meglévő adatbázis séma de még nem létezik migráció hozzá, ezzel a pranccsal le lehet generálni az összes szükséges migrációt illetve ha csak egy táblának szeretnék legenerálni a migrációs fájlját (mert pl.: nagyon sok oszlopa van) akkor ezt is meg tudjuk tenni vele.