clientarea product/services status display (button)

[system32]

I'm trying to integrate a customer panel.
Product/services have been added to the customer's home page and are successful.
But how can they change the buttons?
Example, 
Active product button green.
The suspended product button is yellow.
The discontinued product button is red.

This is already in the "six" theme. Font colors vary according to product situation.
But unfortunately, my integrated theme does not work.
I think a JavaScript file may not work because we have shown the product/services on the home page with a hook.

Can you help me on this?

Sample is attached.
You can see the product/services buttons are all the same green.

[brian!]

21 hours ago, system32 said:

This is already in the "six" theme. Font colors vary according to product situation.

because the array from the tablelists contains both the product status, and a css class based on that status... i'm assuming your hook array doesn't do that.

21 hours ago, system32 said:

I think a JavaScript file may not work because we have shown the product/services on the home page with a hook.

I doubt it's a js issue - css perhaps, but not js... though I can't see the code, so I might be talking rubbish! lol

21 hours ago, system32 said:

Can you help me on this?

when you say a hook, you mean a homepage panel hook or another type of hook ?

as I said, I think the problem will lie in either the array created in the hook, or how you're outputting it.

[system32]

45 minutes ago, brian! said:

tablelists'den gelen dizi hem ürün durumunu hem de bu duruma dayanan bir css sınıfını içerdiğinden ... kanca dizininizin bunu yapmadığını farz ediyorum.

Bunun bir js meselesi olduğundan şüpheliyim - belki de css, ama js değil ... kodu göremiyorum, bu yüzden çöp gibi konuşuyorum! lol

Kanca derken, ana sayfa paneli kancası mı yoksa başka tür bir kanca mı demek istiyorsunuz ?

Dediğim gibi, sorunun ya kancada yaratılan dizide ya da onu nasıl çıktıracağınızda yatacağını düşünüyorum.

Thank you for your answer.
I just wanted to show you on the customer's main page of product services and have shown.
Only the buttons do not change depending on the product.

The hook we used for this and the clientareahome.tpl codes are as follows.

clientareahome.tpl

{include file="$template/includes/tablelist.tpl" tableName="ServicesList" filterColumn="3"}
<script type="text/javascript">
    jQuery(document).ready( function ()
    {
        var table = jQuery('#tableServicesList').removeClass('hidden').DataTable();
        {if $orderby == 'product'}
            table.order([0, '{$sort}'], [3, 'asc']);
        {elseif $orderby == 'amount' || $orderby == 'billingcycle'}
            table.order(1, '{$sort}');
        {elseif $orderby == 'nextduedate'}
            table.order(2, '{$sort}');
        {elseif $orderby == 'domainstatus'}
            table.order(3, '{$sort}');
        {/if}
        table.draw();
        jQuery('#tableLoading').addClass('hidden');
    });
</script>

<div class="col-xl-8 col-lg-7">
                    <div class="token-transaction card card-full-height clearfix">
                        <div class="card-innr">
                            <div class="card-head has-aside">
                                <h4 class="card-title">{$LANG.manageproduct}</h4>
                                <div class="card-opt"><a href="clientarea.php?action=services" class="link ucap">{$LANG.viewAll}<em class="fas fa-angle-right ml-2"></em></a></div>
                            </div>            						
                            <table id="tableServicesList" class="table tnx-table">
                                <thead>
                                    <tr>
                                        <th>{$LANG.orderproduct}</th>
                                        <th>{$LANG.invoicesamount}</th>
                                        <th class="d-none d-sm-table-cell tnx-date">{$LANG.nextdue}</th>
                                        <th class="tnx-type">
                                            <div class="tnx-type-text"></div>
                                        </th>
                                    </tr>
                                    <!-- tr -->
                                </thead>
                                <!-- thead -->
                                <tbody>
								 {foreach key=num from=$services item=service}	
                                        <td>
                                        <div class="d-flex align-items-center">
                                        <div class="data-state data-state-approved"></div><span class="lead">{$service.product}</span></div>
                                        </td>
                                        <td><span><span class="lead">{$service.amount} </span><span class="sub"> {$service.billingcycle} <em class="fas fa-info-circle" data-toggle="tooltip" data-placement="bottom" data-original-title="Aylık Tutar Gösterilmektedir."></em></span></span>
                                        </td>
                                        <td class="d-none d-sm-table-cell tnx-date"><span class="sub sub-s2">{$service.nextduedate}</span></td>
                                        <td class="tnx-type">										
									    <td class="tnx-type"><span class="tnx-type-md badge badge-outline badge-success badge-md status-{$service.status|strtolower}">{$service.domainstatus}</span><span class="tnx-type-sm badge badge-sq badge-outline badge-success badge-md">P</span></td>
                                    </tr>
                                    <!-- tr -->
									 {/foreach}
                                </tbody>
                                <!-- tbody -->
                            </table>
                            <!-- .table -->
                        </div>
                    </div>
                </div>

Hook;

<?php

use Illuminate\Database\Capsule\Manager as Capsule;

function products_list_hook($vars) {

   $client = Menu::context('client'); 

   $services = Capsule::table('tblhosting')
               ->join('tblproducts','tblhosting.packageid','=','tblproducts.id')
               ->where('userid',$client->id)
               ->select('tblhosting.*','tblproducts.name as product')
               ->get();

   $encodedata = json_encode($services);
   $decodedata = json_decode($encodedata, true);

   return array("services" => $decodedata);
}
add_hook("ClientAreaPageHome", 1, "products_list_hook");

 

[brian!]

the hook looks fine, but try changing the line in the template that outputs the status to...

<td class="tnx-type"><span class="tnx-type-md badge badge-outline badge-success badge-md status-{$service.domainstatus|strtolower}">{$service.domainstatus}</span><span class="tnx-type-sm badge badge-sq badge-outline badge-success badge-md">P</span></td>

I don't think $service.status exists, so that's probably why the buttons aren't changing colour - try the above and see if that works (it should if the status-??? css classes exist).

[system32]

7 hours ago, brian! said:

the hook looks fine, but try changing the line in the template that outputs the status to...

<td class="tnx-type"><span class="tnx-type-md badge badge-outline badge-success badge-md status-{$service.domainstatus|strtolower}">{$service.domainstatus}</span><span class="tnx-type-sm badge badge-sq badge-outline badge-success badge-md">P</span></td>

I don't think $service.status exists, so that's probably why the buttons aren't changing colour - try the above and see if that works (it should if the status-??? css classes exist).

I thank you.
It was in this way.