Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion

osTicket v1.9.4 (stable) is now available! Go get it now

[MOD] OsTicket : TERMINAL

This mod is suitable for anywhere that you need to display ticket data in an easily readable format, from a large distance. This first post will be the part that actually makes up the terminal...second post will be styling, third will be access.

If you don't feel like doing the mod by hand, here is a link to a .zip archive containing all of the completed files. Don't forget to check the readme and SQL files!

TERMINAL.zip

LIKE THIS MOD? BUY ME A BEER :D


This mod is only for displaying data. I have installed it 3 times (to date) on v1.6 ST. Line numbers may vary, pay very close attention to the code.

All of the ticket operations have been removed.

at the end of this mod (if you follow my styling) we will have this...

image

The first thing we'll need to do is copy and rename a couple of files.

copy /scp/tickets.php and rename it tickets_terminal.php

also copy /include/staff/tickets.inc.php and rename it to tickets_terminal.inc.php

Now lets open up /scp/tickets_terminal.php

Scroll all the way to the bottom of the page and find this code...

require_once(STAFFINC_DIR.'header.inc.php');
require_once(STAFFINC_DIR.$inc);
require_once(STAFFINC_DIR.'footer.inc.php');


We are going to comment out a couple of lines...mostly to remove the styling and just give us pure HTML, so that we have a way to see our progress. We are also going to change the second line, to point to our new /include/staff/tickets_terminal.inc.php.

Make the code like this...

//require_once(STAFFINC_DIR.'header.inc.php');
require_once('../include/staff/tickets_terminal.inc.php');
//require_once(STAFFINC_DIR.'footer.inc.php');


Lets take a look at what we have so far. Enter this url into your browser.

http://www.yoursite.com/scp/tickets_terminal.php


Not bad. Still too busy for reading from afar.

Now lets open up tickets_terminal.inc.php

Here we will comment out some more code just to clean up the presentation a bit.

Lets get rid of that search box first...

On line 260 You will find..

[HTML][/HTML]

change it to...

[HTML]<?php /*?> [/HTML]

Online 372 you will find..

[HTML][/HTML]

Change it to...

<!-- SEARCH FORM END --><?php */?>


There we go...no more search box.

Now lets take out that refresh button..comment out line 379 or 378, depending on your pasting habits :P.

[HTML][/HTML]

PHP comment out everything between line 451 and 459 to remove the select toggles...

 <?php /*?><tr><td style=\"padding-left:20px\">
<?if($canDelete || $canClose) { ?>
Select:
<a href=\"#\" onclick=\"return select_all(document.forms['tickets'],true)\">All</a>&nbsp;
<a href=\"#\" onclick=\"return reset_all(document.forms['tickets'])\">None</a>&nbsp;
<a href=\"#\" onclick=\"return toogle_all(document.forms['tickets'],true)\">Toggle</a>&nbsp;
<?}?>
page:<?=$pageNav->getPageLinks()?>
</td></tr><?php */?>


and lastly, let's remove the overdue, close, and delete buttons.

comment out lines 477-480..

[HTML][/HTML]

then comment out lines 485-488..

[HTML][/HTML]

then comment out lines 492-493..

[HTML][/HTML]

Allright, now we have the page stripped down to just the tickets view. Let's make the page refresh every few seconds automatically.

Go back to /include/staff/tickets_terminal.php and on line 17 add this code...

[HTML]header( 'refresh: 30; url=#' );[/HTML]

Now the page will refresh every 30 seconds all by itself. woot.

So the final question remains...how do we display only open tickets on our terminal? Easy. Use the search scheme that is built into the URL.

To see only open tickets...make the url like this...

[HTML]http://yoursite.com/scp/tickets_terminal.php?status=open[/HTML]



To see only closed tickets make it like this...

[HTML] http://yoursite.com/scp/tickets_terminal.php?status=closed[/HTML]

We should have this...

image

There we go...a pretty decent terminal even though the letters are small.

Next Post....Styling TERMINAL For Viewing From A Distance!

Comments

  • Terminal view (styling)

    Allright, now we have a pretty decent terminal, although, it would probably be hard to read from a distance,
    and that remaining checkbox is useless now so lets get rid of that first.

    open up includes/staff/tickets_terminal.inc.php

    comment out lines 390-392 like this..

    [HTML]<?php /*?><?if($canDelete || $canClose) {?>
     
    <?}?><?php */?>[/HTML]

    then comment out lines 426-430 like this..

    [HTML]<?php /*?><?if($canDelete || $canClose) {?>

    " onClick="highLight(this.value,this.checked);">

    <?}?><?php */?>[/HTML]

    The columns are now a bit too wide for the data that they hold..lets resize them.

    Replace lines 392 - 401 with this code...

     <th  align=\"left\" width=\"35\" >
    <a href=\"tickets.php?sort=ID&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Ticket ID <?=$negorder?>\">Ticket</a></th>
    <th align=\"left\" width=\"50\">
    <a href=\"tickets.php?sort=date&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Date <?=$negorder?>\">Date</a></th>
    <th align=\"left\" width=\"330\">Subject</th>
    <th align=\"left\" width=\"120\">
    <a href=\"tickets.php?sort=dept&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Category <?=$negorder?>\">Department</a></th>
    <th align=\"left\" width=\"70\">
    <a href=\"tickets.php?sort=pri&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Priority <?=$negorder?>\">Priority</a></th>
    <th align=\"left\" width=\"180\" >From</th>


    And lines 429 - 438 with this code...

    <td align=\"left\" title=\"<?=$row['email']?>\" nowrap>
    <a class=\"Icon <?=strtolower($row['source'])?>Ticket\" title=\"<?=$row['source']?> Ticket: <?=$row['email']?>\"
    href=\"tickets.php?id=<?=$row['ticket_id']?>\"><?=$tid?></a></td>
    <td style=\"font-size:18px; color:#ffffff;\" align=\"left\" nowrap><?=Format::db_date($row['created'])?></td>
    <td style=\"font-size:18px;color:#ffffff;\"><?=$subject?>
    &nbsp;<?=$row['attachments']?\"<span class='Icon file'>&nbsp;</span>\":''?></td>
    <td style=\"font-size:18px; color:#ffffff;\" align=\"left\" nowrap><?=Format::truncate($row['dept_name'],30)?></td>
    <td style=\"font-size:18px; color:#ffffff; background-color:<?=$row['terminal_priority_color']?>;\" align=\"left\" class=\"nohover\" align=\"center\" ><?=$row['priority_desc']?></td>
    <td style=\"font-size:18px; color:#ffffff;\" align=\"left\" nowrap><?=Format::truncate($row['name'],22,strpos($row['name'],'@'))?>&nbsp;</td>
    </tr>


    Priority colors are held in the database table ost_ticket_priority under the column priority_color. You'll need
    PHPMyAdmin or a similar database editor to create a new column called terminal_priority_color on table ost_ticket_priority using this SQL...

    ALTER TABLE ost_ticket_priority ADD terminal_priority_color VARCHAR(7) AFTER priority_color;


    Fill in the new column with your color values. I used black #000000 for the low and normal priorities. Red #FF0000 for the high and emergency priorities.

    Now lets make a copy of of includes/staff/header.inc.php and rename it to header_terminal.inc.php.
    Also make a copy of includes/staff/footer.inc.php and rename it to footer_terminal.inc.php

    Open up header_terminal.inc.php and comment out EVERYTHING from line 14 -64.

    [HTML]<?php /*?> Lines 14-65 <?php */?>[/HTML]

    Eventually we will be creating our very own stylesheets for our terminal so lets go ahead and reference it in the header.

    Change line 11 to this

    [HTML] [/HTML]

    and change line 12 to this...

    [HTML][/HTML]

    Save that and open up includes/staff/footer_terminal.inc.php

    Replace line 3 with this code...

    <div id=\"footer\">Copyright &copy; 2006-<?=date('Y')?>&nbsp;osTicket.com. &nbsp;All Rights Reserved. <br>TERMINAL MOD BY <a href=\"mailto:Teryakisan@gmail.com\">TERYAKISAN</a></div>


    Save that and open up /scp/tickets_terminal.php

    Scroll all the way to the bottom and change line 477 (one that we commented out earlier) to this code..

    require_once(STAFFINC_DIR.'header_terminal.inc.php');


    and line 479 to this code...

    require_once(STAFFINC_DIR.'footer_terminal.inc.php');


    Now it points to our new header and footer (and our stylesheets!)

    Save that and we are done with tickets_terminal.php

    Now for the fun part!! Lets make a copy of scp/css/main.css and rename it to main_terminal.css.
    Also make a copy of scp/css/style.css and rename it to style_terminal.css.

    Our Terminal should now look like this...

    image

    I tend to prefer a dark background with light colors for the text in a terminal view, plus, I feel its easier on the eyes from a distance.

    So now lets open up scp/css/main_terminal.css and lets make the background nice and black.

    change line 2 to read..

    background:#000;


    and line 8 to read..

    background:url(/images/bg.gif) #000;


    On line 78 we have the .footer class...replace it with this code...

    [HTML]#footer {
    padding:2px 5px 2px 5px;
    border:1px solid #ccc;
    border-top:1px solid #666;
    background:#000000;
    color:#FFF;
    font-size:12px;
    text-align:center;
    margin:0 auto 0 auto;
    }[/HTML]

    Now scroll down to line 218 and add..

    font-size:18px;


    to the .Icon class.

    And were done with that one.

    Now lets open up scp/css/style_terminal.css.

    Scroll down to line 32-33.. change them to this code...

    color:#ffffff;
    font-size:24px;


    Now scroll down to line 65. I'm going to go with two really dark greys here.
    You can do whatever you think looks nice.

    replace lines 66 through 68 with this code..

    /* Alt rows used on most data tables */
    .row1 td { background-color: #404040; }
    .row2 td { background-color: #383838; }


    Lets darken that table header too...change line 98 to read..

    background: #3b3131;


    All of the rest of the styling will be done on /include/staff/tickets_terminal.inc.php
    so go ahead and open that up and scroll down to line 392 and replace lines 392-401 with this code...

      <th  align=\"left\" width=\"35\" >
    <a style=\"font-size:18px;\" href=\"tickets.php?sort=ID&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Ticket ID <?=$negorder?>\">Ticket</a></th>
    <th align=\"left\" width=\"50\">
    <a style=\"font-size:18px; href=\"tickets.php?sort=date&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Date <?=$negorder?>\">Date</a></th>
    <th align=\"left\" width=\"330\"><span style=\"font-size:18px;\">Subject</span></th>
    <th align=\"left\" width=\"120\">
    <a style=\"font-size:18px; href=\"tickets.php?sort=dept&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Category <?=$negorder?>\">Department</a></th>
    <th align=\"left\" width=\"70\">
    <a style=\"font-size:18px; href=\"tickets.php?sort=pri&order=<?=$negorder?><?=$qstr?>\" title=\"Sort By Priority <?=$negorder?>\">Priority</a></th>
    <th align=\"left\" width=\"180\" ><span style=\"font-size:18px;\">From</span></th>


    Then scroll down and replace lines 429-437 with this code.

     <td align=\"left\" title=\"<?=$row['email']?>\" nowrap>
    <a class=\"Icon <?=strtolower($row['source'])?>Ticket\" title=\"<?=$row['source']?> Ticket: <?=$row['email']?>\"
    href=\"tickets.php?id=<?=$row['ticket_id']?>\"><?=$tid?></a></td>
    <td style=\"font-size:18px; color:#ffffff;\" align=\"left\" nowrap><?=Format::db_date($row['created'])?></td>
    <td style=\"font-size:18px;color:#ffffff;\"><?=$subject?>
    &nbsp;<?=$row['attachments']?\"<span class='Icon file'>&nbsp;</span>\":''?></td>
    <td style=\"font-size:18px; color:#ffffff;\" align=\"left\" nowrap><?=Format::truncate($row['dept_name'],30)?></td>
    <td style=\"font-size:18px; color:#ffffff;\" align=\"left\" class=\"nohover\" align=\"center\" style=\"background-color:<?=$row['priority_color']?>;\"><?=$row['priority_desc']?></td>
    <td style=\"font-size:18px; color:#ffffff;\" align=\"left\" nowrap><?=Format::truncate($row['name'],22,strpos($row['name'],'@'))?>&nbsp;</td>


    And one last bit, for when the open ticket count reaches zero.

    Scroll down to line 443 and replace it With this code....

    <tr class=\"<?=$class?>\"><td colspan=8><span style=\"color:#fff; font-size:18px;\">Query returned 0 results.</span></td></tr>


    Awesome....now our terminal looks like this...

    image

    LIKE THIS MOD? BUY ME A BEER :D
  • Hey, how do I launch it? And once it's on, how do I get back out?, My associate asked today.

    Hrm. .O__O.

    Instead of Explaining URL schemes to him; I wrote another little bit of code to launch the Terminal from the Admin Panel and just modified pre-existing code to get us back out.

    Lets open up includes/staff/header.inc.php and replace lines 35-41 with this code...

      <?php
    if($thisuser->isAdmin() && !defined('ADMINPAGE')) { ?>
    | <a href=\"admin.php\">Admin Panel</a>
    <?}else{?>
    | <a href=\"index.php\">Staff Panel</a>
    <?}?>
    | <a href=\"profile.php?t=pref\">My Preference</a> | <a href=\"logout.php\">Log Out</a>
    <?php if($thisuser->isAdmin() && defined('ADMINPAGE')) { ?>
    | <a href=\"tickets_terminal.php?status=open\">TERM_OPEN</a>
    | <a href=\"tickets_terminal.php?status=closed\">TERM_CLOSED</a>
    <?}?>
    </p>


    TERM_OPEN of course takes us to the terminal and displays only open tickets. TERM_CLOSED does the same but displays closed tickets.

    Our admin panel now looks like this...

    image

    Now that we are in the terminal, we might just need a way to get back out. I like to fullscreen the browser while this is running, so a link back would be handy dandy.

    Lets open up include/staff/tickets_terminal.inc.php

    Replace line 376 with this code....

    <td width=\"80%\" class=\"msg\" >&nbsp;<b><?=$showing?>&nbsp;&nbsp;&nbsp;<?=$results_type?><a href=\"tickets.php\" style=\"text-decoration:none;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></b></td>


    Now we have a "secret" way out! (fist bump) Hover your mouse right after where it says "Open Tickets" on the top of your page.

    image

    Give that linked space a click and your right back to the default tickets page.

    LIKE THIS MOD? BUY ME A BEER :D

    :cool:
Sign In or Register to comment.