Chronos

Topic: Spotlight Jobs v2 - Timer based!

Hello everyone! I've been away from JobberBase for a while due to other work, but since I have time again I decided to finish a mod I had been working on a while earlier.

This is basically an adjusted version of my earlier Spotlight modification. Obviously it requires either the previous mod or JobberBase 1.6 (which had it included). It has the following features:

- Both a time-based spotlight (with a begin and end date) and an infinite mode (no begin or end date)
- Easily switch mode by clicking the spotlight icon multiple times (disabled->timer version->infinite)
- Select a date using a mini-calendar, which automatically saves after selecting

Screenshot: Admin panel showing a disabled spotlight, timer-based spotlight and infinite spotlight.

I've tested the instructions on a clean installation of Jobberbase, so it should be error-free. If I missed something, let me know and I'll have a look. Also, I'm open for suggestions and improvements.

This mod should be compatible with my 'Improved Admin Interface' modification, but only if that mod is installed before this one (since both replace the same code within posts-loop.tpl).

1. Alter db table:

Code:
ALTER TABLE `jobs` ADD `spotlight_begin` INT(11) default NULL AFTER `spotlight`;
ALTER TABLE `jobs` ADD `spotlight_end` INT(11) default NULL AFTER `spotlight_begin`;

2. in "_includes/Class.Job.php":

Find:

Code:
a.spotlight AS spotlight,

Add after:

Code:
a.spotlight_begin AS spotlight_begin, a.spotlight_end AS spotlight_end,

Find:

Code:
$this->mIsSpotlight = $row['spotlight'];

Add below:

Code:
$this->mSpotlightBegin = $row['spotlight_begin'];
$this->mSpotlightEnd = $row['spotlight_end'];

Find any (3 appearences):

Code:
'is_spotlight' => $this->mIsSpotlight);

Replace with:

Code:
'is_spotlight' => $this->mIsSpotlight,
'spotlight_begin' => date('d-m-Y',$this->mSpotlightBegin),
'spotlight_end' => date('d-m-Y',$this->mSpotlightEnd));

Find:

Code:
if ($spotlight &&  is_numeric($spotlight))
{
    $conditions .= ' AND spotlight = ' . $spotlight;
}

Replace with:

Code:
if ($spotlight && is_numeric($spotlight))
{
    // spotlight = 0 > Get all non-spotlight jobs
    // spotlight = 1 > Get all infinite and current timed spotlight jobs
    // spotlight = 2 > Get all spotlight jobs regardless of time (for admin usage)
    // spotlight = false > All jobs, regardless of spotlight value (default)

    if ($spotlight == 0) { $conditions .= ' AND spotlight = 0'; }
    elseif ($spotlight == 1) { $conditions .= ' AND (spotlight = 2 OR (spotlight = 1 AND spotlight_begin > ' . time() . ' AND spotlight_end < ' . time() . '))'; }
    elseif ($spotlight == 2) { $conditions .= ' AND spotlight > 0'; }
}

Find:

Code:
// Activate spotlight-feature for a job post
public function SpotlightActivate()
{
    global $db;
    $sql = 'UPDATE jobs SET spotlight = 1 WHERE id = ' . $this->mId;
    $db->query($sql);
}

Replace with:

Code:
// Update spotlight-feature for a job post
public function SpotlightUpdate($spotlight_begin, $spotlight_end)
{
    global $db;
    
    $sql = 'UPDATE jobs SET spotlight_begin = '.$spotlight_begin.', spotlight_end = '.$spotlight_end.' WHERE id = ' . $this->mId;
    $db->query($sql);
    }

// Activate spotlight-feature for a job post
public function SpotlightActivate()
{
    global $db;
    
    $sql = 'SELECT spotlight FROM jobs WHERE id = ' . $this->mId;
    $result = $db->query($sql);
    $row = $result->fetch_assoc();
    
    if ($row['spotlight'] == 0) $sql = 'UPDATE jobs SET spotlight = 1 WHERE id = ' . $this->mId;
    else $sql = 'UPDATE jobs SET spotlight = 2 WHERE id = ' . $this->mId;
    
    $db->query($sql);
}

3. in "admin/index.php"

Find:

Code:
case 'activate-spotlight':
    if(!isset($_SESSION['AdminId']))

Add above:

Code:
case 'update-spotlight':
    if(!isset($_SESSION['AdminId']))
    {
        redirect_to(BASE_URL);
        exit;
    }
    require_once 'page_update_spotlight.php';
    $flag = 1;
    break;

4. in "js/function.js"
--------------------

Find:

Code:
        DeactivateSpotlight: function()
        {    
            
            var url = Jobber.jobber_admin_url+'deactivate-spotlight/';
            Jobber.SpotlightDeactivate(url, Jobber.job_id);
            
        },
        ActivateSpotlight: function()
        {    
            
            var url = Jobber.jobber_admin_url+'activate-spotlight/';
            Jobber.SpotlightActivate(url, Jobber.job_id, 0);
            
        },
        SpotlightActivate: function(url, job_id, is_first_page)
        {
            $.ajax({
              type: "POST",
              url: url,
              data: "job_id=" + job_id,
              success: function(msg) {
                   if (msg != "0")
                    {
                        var currentRowId = 'item'+job_id;
                        var currentLinkId = 'activateSpotlight'+job_id;
                        if(is_first_page == 1)
                        {
                            $("#"+currentRowId).css({ display: "none" });
                        }
                        else
                        {
                             Jobber.job_id = job_id;
                             document.getElementById(currentLinkId).setAttribute('onclick', Jobber.DeactivateSpotlight);
                             document.getElementById(currentLinkId).onclick = Jobber.DeactivateSpotlight; 
                             document.getElementById(currentLinkId).innerHTML = '<img src="'+Jobber.jobber_url+'img/icon_spotlight_deactivate.gif" alt="deactivate" />';
                             document.getElementById(currentLinkId).id = 'deactivateSpotlight'+job_id;
                        }    
                    }
              }
            });
        },
        
        SpotlightDeactivate: function(url, job_id)
        {
            $.ajax({
              type: "POST",
              url: url,
              data: "job_id=" + job_id,
              success: function(msg) {
                   if (msg != "0")
                    {
                        var currentLinkId = 'deactivateSpotlight'+job_id;
                        Jobber.job_id = job_id;
                        document.getElementById(currentLinkId).setAttribute('onclick', Jobber.ActivateSpotlight);
                        document.getElementById(currentLinkId).onclick = Jobber.ActivateSpotlight;
                        document.getElementById(currentLinkId).innerHTML = '<img src="'+Jobber.jobber_url+'img/icon_spotlight_activate.gif" alt="activate" />';
                        document.getElementById(currentLinkId).id = 'activateSpotlight'+job_id;
                    }
              }
            });
        },

Replace with:

Code:
        SpotlightUpdate: function(url, job_id)
        {
            var spotlight_begin = $("[name='spotlight_begin"+job_id+"']").val();
            var spotlight_end = $("[name='spotlight_end"+job_id+"']").val();
            
            $.ajax({
              type: "POST",
              url: url,
              data: "job_id=" + job_id + "&spotlight_begin=" + spotlight_begin + "&spotlight_end=" + spotlight_end,
              success: function(msg) {
                   if (msg == "0")
                    {
                        alert('An error occured while saving. Please enter the date again.');
                    }
              }
            });
        },
        
        SpotlightActivate: function(url, job_id, is_first_page, type)
        {
            $.ajax({
              type: "POST",
              url: url,
              data: "job_id=" + job_id,
              success: function(msg) {
                   if (msg != "0")
                    {
                        var currentRowId = 'item'+job_id;
                        var currentLinkId = 'activateSpotlight'+job_id;
                        if(is_first_page == 1)
                        {
                            $("#"+currentRowId).css({ display: "none" });
                        }
                        else
                        {
                            if(type == 1)
                            {
                                Jobber.job_id = job_id;
                                document.getElementById(currentLinkId).setAttribute('onclick', 'Jobber.SpotlightActivate("'+Jobber.jobber_url+'/activate-spotlight/",'+job_id+',0,2)');
                                document.getElementById(currentLinkId).onclick = 'Jobber.SpotlightActivate("'+Jobber.jobber_url+'/activate-spotlight/",'+job_id+',0,2)';
                                document.getElementById(currentLinkId).innerHTML = '<img src="'+Jobber.jobber_url+'img/icon_spotlight_timer.png" alt="deactivate" />';
                                document.getElementById(currentLinkId).id = 'activateSpotlight'+job_id;
                                $('#spotlight_timer'+job_id).toggle();
                            }
                            else
                            {
                                Jobber.job_id = job_id;
                                document.getElementById(currentLinkId).setAttribute('onclick', 'Jobber.SpotlightDeactivate("'+Jobber.jobber_url+'/deactivate-spotlight/",'+job_id+')');
                                document.getElementById(currentLinkId).onclick = 'Jobber.SpotlightDeactivate("'+Jobber.jobber_url+'/deactivate-spotlight/",'+job_id+')';
                                document.getElementById(currentLinkId).innerHTML = '<img src="'+Jobber.jobber_url+'img/icon_spotlight_enabled.png" alt="deactivate" />';
                                document.getElementById(currentLinkId).id = 'deactivateSpotlight'+job_id;
                                $('#spotlight_timer'+job_id).toggle();
                            }
                        }    
                    }
              }
            });
        },

        SpotlightDeactivate: function(url, job_id)
        {
            $.ajax({
              type: "POST",
              url: url,
              data: "job_id=" + job_id,
              success: function(msg) {
                   if (msg != "0")
                    {
                        var currentLinkId = 'deactivateSpotlight'+job_id;
                        Jobber.job_id = job_id;
                        document.getElementById(currentLinkId).setAttribute('onclick', 'Jobber.SpotlightActivate("'+Jobber.jobber_url+'/activate-spotlight/",'+job_id+',0,1)');
                        document.getElementById(currentLinkId).onclick = 'Jobber.SpotlightActivate("'+Jobber.jobber_url+'/activate-spotlight/",'+job_id+',0,1)';
                        document.getElementById(currentLinkId).innerHTML = '<img src="'+Jobber.jobber_url+'img/icon_spotlight_disabled.png" alt="activate" />';
                        document.getElementById(currentLinkId).id = 'activateSpotlight'+job_id;
                    }
              }
            });
        },

5. in "admin/_templates/header.tpl"

Find:

Code:
<link rel="stylesheet" href="{$BASE_URL_ADMIN}css/screen.css" type="text/css" media="screen" />

Add below:

Code:
<link rel="stylesheet" href="{$BASE_URL_ADMIN}css/datePicker.css" type="text/css" media="screen" />

Find:

Code:
<script src="{$BASE_URL_ADMIN}js/jquery.js" type="text/javascript"></script>

Add below:

Code:
<script src="{$BASE_URL_ADMIN}js/date.js" type="text/javascript"></script>
<script src="{$BASE_URL_ADMIN}js/jquery.datePicker.js" type="text/javascript"></script>

6. in "admin/_templates/posts-loop.tpl"

Find:

Code:
{foreach item=job from=$jobs name=tmp}...{/foreach}

Replace with:

Code:
{foreach item=job from=$jobs name=tmp}

    <tr id="item{$job.id}">
        <td>
            {if $job.type_id == $smarty.const.JOBTYPE_FULLTIME}
            <img src="{$BASE_URL}img/icon-fulltime.png" alt="full-time" />
            {elseif $job.type_id == $smarty.const.JOBTYPE_PARTTIME}
            <img src="{$BASE_URL}img/icon-parttime.png" alt="part-time" />
            {elseif $job.type_id == $smarty.const.JOBTYPE_FREELANCE}
            <img src="{$BASE_URL}img/icon-freelance.png" alt="freelance" />
            {/if}
            <a href="{$BASE_URL_ADMIN}job/{$job.id}/{$job.url_title}/" title="{$job.title}">{$job.title}</a> <em>({$job.location})</em><br />
            <strong>Date:</strong> {$job.created_on}
            <strong>Company:</strong> {$job.company}<br />
        </td>
        <td width="20" style="font-size: 11px;">
            {if $job.is_spotlight == 0}
                <a id="activateSpotlight{$job.id}" href="javascript:void(0);" onclick="Jobber.SpotlightActivate('{$BASE_URL_ADMIN}activate-spotlight/', {$job.id}, {if $CURRENT_PAGE == ''}1{else}0{/if}, 1);" title="Toggle Spotlight-State"><img src="{$BASE_URL}img/icon_spotlight_disabled.png" alt="disabled" /></a>
            {elseif $job.is_spotlight == 1}
                <a id="activateSpotlight{$job.id}" href="javascript:void(0);" onclick="Jobber.SpotlightActivate('{$BASE_URL_ADMIN}activate-spotlight/', {$job.id}, {if $CURRENT_PAGE == ''}1{else}0{/if}, 2);" title="Toggle Spotlight-State"><img src="{$BASE_URL}img/icon_spotlight_timer.png" alt="activated:timer" /></a>
            {elseif $job.is_spotlight == 2}
                <a id="deactivateSpotlight{$job.id}" href="javascript:void(0);" onclick="Jobber.SpotlightDeactivate('{$BASE_URL_ADMIN}deactivate-spotlight/', {$job.id});" title="Toggle Spotlight-State"><img src="{$BASE_URL}img/icon_spotlight_enabled.png" alt="activated:infinite" /></a>
            {/if}
        </td>
        <td width="95">
            <div id="spotlight_timer{$job.id}" style="{if $job.is_spotlight == 1}display:inline-block;{else}display:none;{/if}">
                <input name="spotlight_begin{$job.id}" class="date-pick" type="text" value="{if $job.spotlight_begin != '01-01-70'}{$job.spotlight_begin}{/if}" onchange="Jobber.SpotlightUpdate('{$BASE_URL_ADMIN}update-spotlight/', {$job.id})" /></label><br />
                <input name="spotlight_end{$job.id}" class="date-pick" type="text" value="{if $job.spotlight_end != '01-01-70'}{$job.spotlight_end}{/if}" onchange="Jobber.SpotlightUpdate('{$BASE_URL_ADMIN}update-spotlight/', {$job.id})" /></label>
            </div>
        </td>
        <td>
            <a href="{$BASE_URL_ADMIN}edit-post/{$job.id}/" title="edit"><img src="{$BASE_URL}img/icon_edit.gif" alt="edit" /></a>
        </td>
        <td>
            {if $job.is_active == 0}
                <a id="activateLink{$job.id}" href="javascript:void(0);" onclick="Jobber.Activate('{$BASE_URL_ADMIN}activate/', {$job.id}, {if $CURRENT_PAGE == ''}1{else}0{/if});" title="activate"><img src="{$BASE_URL}img/icon_accept.gif" alt="activate" /></a>
            {else}
                <a id="deactivateLink{$job.id}" href="javascript:void(0);" onclick="Jobber.Deactivate('{$BASE_URL_ADMIN}deactivate/', {$job.id});" title="deactivate"><img src="{$BASE_URL}img/icon_deactivate.gif" alt="deactivate" /></a>
            {/if}&nbsp;
        </td>
        <td>
            <a href="javascript:void(0);" onclick="Jobber.Delete('{$BASE_URL_ADMIN}delete/', {$job.id});" title="delete"><img src="{$BASE_URL}img/icon-delete.png" alt="delete" /></a>
        </td>
    </form>
    </tr>
{/foreach}

Find:

Code:
$(".job-posts tr:odd").addClass("alt");

Add below:

Code:
$('.date-pick').datePicker();

7. Extract the contents of the .zip
The following files should be uploaded from this zip file. This includes the latest Jquery and jQuery validate pack (the default jobberbase version is outdated and won't work). You might need to clear the cache of your browser before this mod works correctly.


/admin/page_update_spotlight.css
/admin/css/datePicker.css
/admin/js/date.js
/admin/js/jquery.datePicker.js
/img/icon_spotlight_disabled.png
/img/icon_spotlight_enabled.png
/img/icon_spotlight_timer.png
/img/calendar.png
/js/jquery.js
/js/jquery.validate.pack.js

Last edited by Chronos (2009-04-29 09:00:02)

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

Chronos

Re: Spotlight Jobs v2 - Timer based!

Very minor fix for usage with the improved admin interface:

1. in "admin/_templates/posts-loop.tpl"

Find:

Code:
<th>{$translations.adminpanel.spotlight}</th>

Replace with:

Code:
<th colspan='2'>{$translations.adminpanel.spotlight}</th>

Find:

Code:
            <strong>Date:</strong> {$job.created_on}
            <strong>Company:</strong> {$job.company}<br />

Replace with:

Code:
            <strong>{$translations.adminpanel.date}:</strong> {$job.created_on}
            <strong>{$translations.adminpanel.company}:</strong> {$job.company}<br />
Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

incognito

Re: Spotlight Jobs v2 - Timer based!

Code:

'is_spotlight' => $this->mIsSpotlight,
'spotlight_begin' => date('d-m-Y',$this->mSpotlightBegin),
'spotlight_end' => date('d-m-Y',$this->mSpotlightEnd));

'spotlight_end' => date('d-m-Y',$this->mSpotlightEnd)); should be

Code:
'spotlight_end' => date('d-m-Y',$this->mSpotlightEnd),

smile

Last edited by incognito (2009-05-31 07:52:42)

flakdesign

Re: Spotlight Jobs v2 - Timer based!

Appreciate the contribution Chronos smile

evertsemeijn

Re: Spotlight Jobs v2 - Timer based!

Strangly enough I have lost the spotlight jobs in the frontend. Do I need to change anything in the frontend tpl files or am I missing something important.

No error reports so I don't have a clue... Anyone?

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

Chronos

Re: Spotlight Jobs v2 - Timer based!

In the first spotlight mod the spotlight-state '1' (in the database) meant simply 'enabled'. After installing the updated mod, this will change into 'timer-version'. You should either set dates for all existing spotlight jobs, or change them into permanent ones.

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

evertsemeijn

Re: Spotlight Jobs v2 - Timer based!

Will check it soon. 'Bedankt' for the hint.

Cheers

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

elgreco

Re: Spotlight Jobs v2 - Timer based!

is it possible that the spotlights are shown also in the appropriate category?
e.g there is a spotlight for "web designers" category the spotlight should be on the front page and if pressing the "web designers" should be shown also there

Chronos

Re: Spotlight Jobs v2 - Timer based!

Did you clear the cache, to make sure the old JS file has been refreshed?

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

navjotjsingh

Re: Spotlight Jobs v2 - Timer based!

Got it fixed, updated the code again from this post.

RO-Banen

Re: Spotlight Jobs v2 - Timer based!

Unfortunately the required zip-file is removed...

navjotjsingh

Re: Spotlight Jobs v2 - Timer based!

I tried searching for it on my pc but it seems I too have lost it. If anybody needs the missing screenshot, its here: http://img360.imageshack.us/i/spotlightv2.jpg

shoek

Re: Spotlight Jobs v2 - Timer based!

Hi very good

Someone could upload the files again?

Regards

deeplounge

Re: Spotlight Jobs v2 - Timer based!

nothing here?

jobsbulletin

Re: Spotlight Jobs v2 - Timer based!

Hi All! Will this work with 1.9? If not, do we have a tutorial for 1.9?

http://www.jobsbulletin.ph - Jobs Bulletin Philippines :: Where jobs and skills meet!

jobsbulletin

Re: Spotlight Jobs v2 - Timer based!

jobsbulletin wrote:

Hi All! Will this work with 1.9? If not, do we have a tutorial for 1.9?

Follow up. smile In case you missed reading my question. Thanks!

http://www.jobsbulletin.ph - Jobs Bulletin Philippines :: Where jobs and skills meet!

qwarks

Re: Spotlight Jobs v2 - Timer based!

Can anyone post spotlight_2_mod.zip again?