เทคนิคการเพิ่ม Area ในหน้า Operator Panel ของ Elastix

Elastix IP Pbx

Moderator: jubjang

เทคนิคการเพิ่ม Area ในหน้า Operator Panel ของ Elastix

โพสต์โดย nuiz » 28 พ.ค. 2016 23:27

บทความนี้จะแนะนำขั้นตอนการเพิ่ม Area ในหน้า Operator Panel ของ Elastix ครับ ซึ่งมีขั้นตอนอยู่พอสมควร ไม่แน่ว่าอาจมีคนทำให้ง่ายกว่านี้แล้วก็ได้ครับ ลองค้นๆหาใน Google ครับ

หน้าตาดีฟอลท์ของ Operator Panel ของ Elastix ก็ประมาณในรูปนี้ครับ ซึ่งจะเห็นว่าเบอร์ Extensions อยู่รวมๆกัน
รูปภาพ

ถ้าเราต้องการแบ่งแยกเบอร์ Extension ออกเป็นกลุ่มๆตามแผนกในออฟฟิศ ก็สามารถทำได้ครับ โดย Elastix เตรียมพื้นที่ด้านขวามือเอาไว้ให้เราแล้ว คือส่วนที่เป็น "Area" ครับ ซึ่งมีด้วยกัน 3 Area หรือ 3 แผนก
รูปภาพ

ต้องการแบ่งเป็นแผนกๆก็ลากเบอร์จากด้านซ้ายมือมาวางไว้ใน Area ด้านขวามือได้เลยครับ ดังรูป
รูปภาพ

หากจะแก้ไขชื่อ Area ก็ลิ๊กที่ "Edit Name" แล้วเปลี่ยนชื่อได้เลยครับ ภาษาอะไรก็ได้
รูปภาพ

ก็จะได้ประมาณรูปนี้ครับ
รูปภาพ

ถ้าต้องการมากกว่า 3 Areas หล่ะจะทำอย่างไร บทความนี้มีคำตอบครับ ดังต่อไปนี้

1. แบ็คอัพไฟล์คอนฟิกและดาต้าเบส
แบ็คอัพของเดิมไว้ก่อนครับ กันพลาด
โค้ด: เลือกทั้งหมด
cp -rf /var/www/html/modules/control_panel /var/www/html/modules/control_panel_backup
cp /var/www/db/control_panel_design.db /var/www/db/control_panel_design.db_backup


2. สร้าง Area เพิ่ม
ก่อนทำก็นึกก่อนครับว่าอยากให้มีสักกี่ Area (กี่แผนก) นึกได้ทีหลังก็มาเพิ่มทีหลังได้ครับ สมมติว่าอยากให้มีสัก 10 Areas (ของเดิมมีแล้ว 3 ก็ต้องสร้างเพิ่มอีก 7)

2.1 เข้าดาต้าเบส SQLite
โค้ด: เลือกทั้งหมด
cd /var/www/html/db/
sqlite3 control_panel_design.db

จะได้แบบนี้
SQLite version 3.3.6
Enter ".help" for instructions
sqlite>
ดูชื่อเทเบิลในดาต้าเบส พิมพ์คำสั่ง .tables แล้วกด enter
sqlite> .tables
จะเห็น 2 เทเบิลครับ ชื่อ area และ item_box
area item_box
โดยที่เทเบิล area เก็บชื่อ area ทั้งหมด ทั้งหน้าที่เห็นในหน้า Operator Panel นั่นแหล่ะครับ ส่วนเทเบิล item_box จะเก็บว่าเบอร์ Extensions ไหนอยู่ Area อะไร ซึงการที่เราลากเบอร์ไปมาก็เป็นการอัพเดทเทเบิล item_box แหล่ะรับ

2.2 ดูหมายเลข Area สุดท้ายในเทเบิล area
รันคำสั่ง select * from area; แบบนี้ครับ พิมพ์หลังพร้อมท์ sqlite> นะครับ อย่าลืมเครื่องหมาย ; หลังคำสั่งด้วย
โค้ด: เลือกทั้งหมด
sqlite> select * from area;

จะได้
1|Extension|232|608|Extensions|3|#DEE4FA
2|Area1|100|424.181818|Area 1|2|#FCF9D2
3|Area2|100|424.181818|Area 2|2|#D4DCDC
4|Area3|100|424.181818|Area 3|2|#E0FFEF
5|Queues|100|424.181818|Queues|2|#FED0CF
6|Trunks|271|608|DAHDI Trunks|3|#D0FFD0
7|TrunksSIP|271|608|SIP/IAX Trunks|3|#D0FFFF
8|Conferences|100|424.181818|Conferences|2|#DACCCA
9|Parkinglots|229|424.181818|Parking lots|2|#F5F5DC
จะเห็นว่า 9 คือลำดับสุดท้ายในเทเบิลนี้
ตัวเลข 424.181818 คือขนาดความยาวของกรอบ Area เวลาเราลากขยายหรือหดกรอบตัวเลขนี้ก็จะเปลียไปด้วย
อธิบายเท่านี้ก่อนนะครับ

2.3 เพิ่ม Area ใหม่ตั้งแต่ Area 4 - 10
พิมพ์คำสั่งต่อไปนี้บนพร้อมท์ sqlite> ครับ ทีละคำสั่ง สังเกตุตัวเลข 10 ครับ ในฟิลด์แรกครับ ตัวเลขจะรันไปแบบนี้ 10 11 12 13 ... ส่วน Area X มีเว้นวรรคนั้นเป็น Description ครับ จะตั้งเป็นอะไรก็ได้ เพราะสามารถแก้ไขได้จากหน้าเว็บ Operator Panel

insert or replace into area values (10,'Area4',100,424.181818,'Area 4',2,'#E0FF90');
insert or replace into area values (11,'Area5',100,424.181818,'Area 5',2,'#E0FFA0');
insert or replace into area values (12,'Area6',100,424.181818,'Area 6',2,'#E0FFB0');
insert or replace into area values (13,'Area7',100,424.181818,'Area 7',2,'#E0FFC0');
insert or replace into area values (14,'Area8',100,424.181818,'Area 8',2,'#E0FFD0');
insert or replace into area values (15,'Area9',100,424.181818,'Area 9',2,'#E0FFE0');
insert or replace into area values (16,'Area10',100,424.181818,'Area 10',2,'#E0FFF0');

ขออธิบายบรรทัดเดียวนะครับ บรรทัดแรก
10 คือลำดับที่ 10 ในเทเบิล
Area4 คือ ID ของ Area ตั้งชื่ออะไรก็ได้อย่าให้ซ้ำกับเพื่อน เขียนติดกันด้วยนะครับ
100 ความสูงของ Area เอาเหมือนเดิม เราลากหดหรือขยายบนหน้า Operator Panel ได้
424.181818 ความกว้างของ Area เอาเหมือนเดิม เราลากหดหรือขยายบนหน้า Operator Panel ได้
Area 4 คือชื่อหรือคำอธิบายของมันครับ ที่เราแก้ไขบนหน้า Operator Panel ก็มาแก้ตรงนี้แหล่ะครับ
#E0FF90 คือสีพื้นของมัน คล้ายๆกับสีใน HTML ครับ เปลี่ยนได้ตามใจชอบ ถ้าไม่รู้จะใส่ค่าอย่างไร ให้ค้นหาคำว่า html color ใน Google ครับ
ฟิลด์ตัวเลขไม่ต้องมี ' ' คร่อมก็ได้ แต่ฟิลด์ตัวอักษรควรมี ' ' คร่อมครับ

ตรวจสอบดูครับ
sqlite> select * from area;

1|Extension|232|608|Extensions|3|#DEE4FA
2|Area1|100|424.181818|Area 1|2|#FCF9D2
3|Area2|100|424.181818|Area 2|2|#D4DCDC
4|Area3|100|424.181818|Area 3|2|#E0FFEF
5|Queues|100|424.181818|Queues|2|#FED0CF
6|Trunks|271|608|DAHDI Trunks|3|#D0FFD0
7|TrunksSIP|271|608|SIP/IAX Trunks|3|#D0FFFF
8|Conferences|100|424.181818|Conferences|2|#DACCCA
9|Parkinglots|229|424.181818|Parking lots|2|#F5F5DC
10|Area4|100|424.181818|Area 4|2|#E0FF90
11|Area5|100|424.181818|Area 5|2|#E0FFA0
12|Area6|100|424.181818|Area 6|2|#E0FFB0
13|Area7|100|424.181818|Area 7|2|#E0FFC0
14|Area8|100|424.181818|Area 8|2|#E0FFD0
15|Area9|100|424.181818|Area 9|2|#E0FFE0
16|Area10|100|424.181818|Area 10|2|#E0FFF0

2.4 ออกจากดาต้าเบส
ออกจากดาต้าเบสก่อนครับ พิมพ์ .quit ใน sqlite prompt
โค้ด: เลือกทั้งหมด
sqlite> .quit

ถ้าพิมพ์ผิดแล้วมันไม่ออกให้ ให้กด Control+Z ออกเลยก็ได้ครับ

*** ขั้นตอนต่อไปนี้เป็นการแก้ไขไฟล์ ผมแนะนำให้ใช้โปรแกรม WinSCP ครับ **

3. แก้ไขไฟล์ /var/www/html/modules/control_panel/libs/paloControlPanelUtils.class.php
แบ็คอัพอีกทีกันพลาดครับ
โค้ด: เลือกทั้งหมด
cp /var/www/html/modules/control_panel/libs/paloControlPanelUtils.class.php /var/www/html/modules/control_panel/libs/paloControlPanelUtils.class.php.backup

แล้วใช้ WinSCP เปิดไฟล์ /var/www/html/modules/control_panel/libs/paloControlPanelUtils.class.php
ค้นหา
โค้ด: เลือกทั้งหมด
'right' =>  array('Area1', 'Area2', 'Area3', 'Queues', 'Conferences', 'Parkinglots'),

แก้ไขเป็น
โค้ด: เลือกทั้งหมด
'right' =>  array('Area1', 'Area2', 'Area3', 'Area4', 'Area5', 'Area6', 'Area7', 'Area8', 'Area9', 'Area10', 'Queues', 'Conferences', 'Parkinglots'),

บันทึกไฟล์

4. แก้ไขไฟล์ /var/www/html/modules/control_panel/themes/default/reporte.tpl
ไฟล์นี้จะทำให้แสดง Area บนหน้าจอ Operator Panel ครับ ก่อนแก้ไขอย่าลืมแบ็คอัพไฟล์ไว้ก่อนครับ แล้วใช้ WinSCP เปิด

ค้นหา area1 หรือ area2 หรือไม่ก็ area3 ครับ จะเห็นว่ามันอยู่ภายใน
{literal}
...
{/literal}

ให้ Copy มาทั้งหมดเลยครับ ตั้งแต่ {literal} ถึง {/literal} เลย แล้ว Paste ต่อท้าย {/literal} ของ area3 ครับ

แล้วแก้ไข area3 (สมมติว่า Copy ของ area3 มา) เป็น area4 ครับ แบบนี้ ทำให้ครบจนถึง area10 เลย ถ้าใส่ลำดับผิดก็จะทำให้ตำแหน่ง Area ที่แสดงบนหน้าเว็บ Operator Panel เปลี่ยนไปด้วยครับ

โค้ด: เลือกทั้งหมด
{literal}
{{#view App.PBXPanelView controllerBinding="area3" }}
...
{/literal}

{literal}
{{#view App.PBXPanelView controllerBinding="area4" }}
   {{view App.EditableTitleView }}
   <dd>
   {{#if finishedloading}}
   {{#view App.SortablePanelView }}
      {{#each }}
      {{view App.ExtensionView}}
      {{else}}
      <br/>
      {{/each}}
   {{/view}}
    {{else}}
    <img class="icon" src="modules/{/literal}{$module_name}{literal}/images/loading.gif"/>
    {{/if}}
   </dd>
{{/view}}
{/literal}

{literal}
{{#view App.PBXPanelView controllerBinding="area5" }}
   {{view App.EditableTitleView }}
   <dd>
   {{#if finishedloading}}
   {{#view App.SortablePanelView }}
      {{#each }}
      {{view App.ExtensionView}}
      {{else}}
      <br/>
      {{/each}}
   {{/view}}
    {{else}}
    <img class="icon" src="modules/{/literal}{$module_name}{literal}/images/loading.gif"/>
    {{/if}}
   </dd>
{{/view}}
{/literal}


5. แก้ไขไฟล์ /var/www/html/modules/control_panel/themes/default/js/javascript.js
ไฟล์นี้ต้องแก้ไขเยอะหน่อยครับ ก่อนแก้ไขอย่าลืมแบ็คอัพไว้ก่อน
ไม่ขออธิบายนะครับ แต่ให้เทียบด้านล่างนี้กับไฟล์ในเครื่องของท่านว่าต้องเพิ่มบรรทัดไหนบ้าง ให้ค้นหาคำที่ใกล้ๆกับบรรทัดที่ต้องแก้ไข
โค้ด: เลือกทั้งหมด
   App.DesktopController = Ember.ObjectController.extend({
      // Los siguientes controladores son las áreas a mostrar
      extensions:         null,
      area1:             null,
      area2:             null,
      area3:             null,
      area4:             null,
      area5:             null,
      area6:             null,
      area7:             null,
      area8:             null,
      area9:             null,
      area10:          null,
      queues:            null,
      dahdi:            null,
      iptrunks:          null,
...
      init: function() {
         for (var k in var_init['ESTADO_PANELES']) {
            var_init['ESTADO_PANELES'][k]['parentcontroller'] = this;
         }
         var_init['ESTADO_PANELES']['Extension']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area1']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area2']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area3']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area4']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area5']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area6']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area7']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area8']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area9']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Area10']['typedclass'] = App.Extension;
         var_init['ESTADO_PANELES']['Queues']['typedclass'] = App.Queue;
         var_init['ESTADO_PANELES']['Conferences']['typedclass'] = App.Conference;

         this.extensions = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Extension']);
         this.area1 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area1']);
         this.area2 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area2']);
         this.area3 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area3']);
         this.area4 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area4']);
         this.area5 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area5']);
         this.area6 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area6']);
         this.area7 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area7']);
         this.area8 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area8']);
         this.area9 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area9']);
         this.area10 = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Area10']);
         this.queues = App.PBXPanelController.create(var_init['ESTADO_PANELES']['Queues']);
...
      localizarControladorExtension: function(key, value) {
         var controller = null;
         var objpos = null;
         var controllerList = ['extensions', 'area1', 'area2', 'area3', 'area4', 'area5', 'area6', 'area7', 'area8', 'area9', 'area10'];
         for (var i = 0; i < controllerList.length; i++) {
            var c = this.get(controllerList[i]);
            if (c == null) return null;

...

         var controlkeys = ['extensions', 'area1', 'area2', 'area3', 'area4', 'area5', 'area6', 'area7', 'area8', 'area9', 'area10', 'queues','conferences', 'p arkinglots', 'dahdi', 'iptrunks'];
         for (var i = 0; i < controlkeys.length; i++) {
            this.get(controlkeys[i]).set('finishedloading', true);
         }
...
      locateTargetController: function (obj) {
         var controller;
         
         switch (obj.objtype) {
         case 'phones':
            controller = this.get('extensions');
            switch (obj.current_area) {
            case 'Area1': controller = this.get('area1'); break;
            case 'Area2': controller = this.get('area2'); break;
            case 'Area3': controller = this.get('area3'); break;
            case 'Area4': controller = this.get('area4'); break;
            case 'Area5': controller = this.get('area5'); break;
            case 'Area6': controller = this.get('area6'); break;
            case 'Area7': controller = this.get('area7'); break;
            case 'Area8': controller = this.get('area8'); break;
            case 'Area9': controller = this.get('area9'); break;
            case 'Area10': controller = this.get('area10'); break;
            }
            break;
         case 'conferences':
...
      updatePanelSize: function(sourcePanel, width, height) {
         var leftPanels = ['Extension', 'TrunksSIP', 'Trunks'];
         var rightPanels = ['Area1', 'Area2', 'Area3', 'Area4', 'Area5', 'Area6', 'Area7', 'Area8', 'Area9', 'Area10', 'Queues', 'Conferences', 'Parkinglots'];
...         
         var panelGroups = {
            'left': [this.extensions, this.iptrunks, this.dahdi],
            'right': [this.area1, this.area2, this.area3, this.area4, this.area5, this.area6, this.area7, this.area8, this.area9, this.area10, this.queues, this.conferences, this.parkinglots]
         };
         var pgroup = null;


6. เข้าหน้า Operator Panel ดูผลงาน
กด F5 สักสามสี่ครั้งเพื่อรีเฟรชหน้าจอ ก็จะเห็นแบบนี้
รูปภาพ

7. ย้ายเบอร์มาไว้ใน Area
จะเข้าหน้า Operator Panel แล้วลากเบอร์มาใส่หรือจะแก้ไขจากดาต้าเบสโดยตรงก็ได้ครับ ถ้าจะแก้ไขที่ดาต้าเบสให้ทำดังนี้
โค้ด: เลือกทั้งหมด
cd /var/www/db
sqlite3 control_panel_design.db

แล้วรันคำสั่งต่อไปนี้บนพร้อมท์ sqlite>
ดูลำดับล่าสุดในเทเบิล item_box
โค้ด: เลือกทั้งหมด
select* from item_box;

ถ้าไม่เคยลากเบอร์มาใส่เลยตั้งแต่ติดตั้ง Elastix มา ก็จะไม่มีข้อมูลอะไรครับ แต่ถ้าเคยลากมาไว้แล้วและลากกลับไปคืน ก็จะมีข้อมูลค้างอยู่ เช่น
1|1|101
ซึ่ง 1 ซ้ายมือคือลำดับที่ 1 ในตาราง ส่วน 1 ต่อมาคือหมายเลข ID ของ Area1 ในตาราง area ส่วน 101 คือเบอร์ Extension 101 ครับ
เวลาเราจะใส่ข้อมูลเข้าไป ต้องรันคำสั่งแบบนี้ครับ เป็นการเอาเบอร์ 101 ไปไว้ใน Area 1 (เช็คจากคำสั่ง select * from area; แล้วเห็นว่า Area 1 มี id เป็น 2)
โค้ด: เลือกทั้งหมด
insert into item_box values (1,2,101);

ทำแบบนี้จนครบทุกเบอร์ ทุก Area ที่ต้องการครับ

ถ้าต้องการแก้ไขข้อมูลที่ insert ไปแล้ว ให้ใช้คำสั่งแบบนี้ครับ
insert or replace into item_box values (7,3,101);
หรือไม่ก็แบบนี้
replace into item_box values (7,3,101);

8. ทดสอบการใช้งาน
ลองดูครับ ถ้าจะให้ชัวร์ผมแนะนำให้อ่านบทความนี้สักรอบก่อนแล้วค่อยทำ เวอร์คแน่นอนครับ
รูปภาพ

บทความที่เกี่ยวข้อง
เทคนิคการติดตั้ง Elastix 2.5
เทคนิคการติดตั้ง Asterisk Click2Dial บน Firefox
** หากมีปัญหากับอุปกรณ์ที่ซื้อมาเองหรือบริการที่ทำขึ้นมาเอง ให้โพสต์ถามในเว็บบอร์ดนี้นะครับ **
** งานเร่งด่วนติดต่อว่าจ้างที่เบอร์ 08-5161-9439 อีเมล์ iamaladin@gmail.com ไลน์ NuizVoip ครับ **
nuiz
Diamond Member
 
โพสต์: 6277
ลงทะเบียนเมื่อ: 24 มี.ค. 2010 09:33

Re: เทคนิคการเพิ่ม Area ในหน้า Operator Panel ของ Elastix

โพสต์โดย nuiz » 30 พ.ค. 2016 15:32

หากต้องการสลับตำแหน่งที่แสดงบนหน้า Operator Panel ให้แก้ไขในไฟล์ /var/www/html/modules/control_panel/themes/default/reporte.tpl ครับ โดย Copy/Paste วางบนตำแหน่งที่ต้องการ ระวังเครื่องหมาย {literal} {/literal} ด้วยนะครับ แบ็คอัพไฟล์ก่อนทำก็จะดีมาก

{literal}
{{#view App.PBXPanelView controllerBinding="extensions" }}
...
{/literal}

{* La lista de las troncales DAHDI *}
{literal}
{{#view App.PBXPanelView controllerBinding="dahdi" }}
...
{/literal}

{* La lista de las troncales VoIP *}
{literal}
{{#view App.PBXPanelView controllerBinding="iptrunks" }}
...
{/literal}

{* La lista de las extensiones asignadas al área 1 *}
{literal}
{{#view App.PBXPanelView controllerBinding="area1" }}
...
{/literal}

{* La lista de las extensiones asignadas al área 2 *}
{literal}
{{#view App.PBXPanelView controllerBinding="area2" }}
...
{/literal}
** หากมีปัญหากับอุปกรณ์ที่ซื้อมาเองหรือบริการที่ทำขึ้นมาเอง ให้โพสต์ถามในเว็บบอร์ดนี้นะครับ **
** งานเร่งด่วนติดต่อว่าจ้างที่เบอร์ 08-5161-9439 อีเมล์ iamaladin@gmail.com ไลน์ NuizVoip ครับ **
nuiz
Diamond Member
 
โพสต์: 6277
ลงทะเบียนเมื่อ: 24 มี.ค. 2010 09:33


ย้อนกลับไปยัง Elastix - Unified Communications Software

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และ บุคคลทั่วไป 2 ท่าน