I am using Spring Boot Thymeleaf and wanted to take conditional based decision. If condition matches, then whole row should be green else red
<body>
<div class="container my-2">
<h1>Active Workflow Details</h1>
<div class="card">
<div class="card-body">
<div th:switch="${mdsAcives}" class="container my-5">
<div class="col-md-10">
<h2 th:case="null">No record found !!</h2>
<div th:case="*">
<table border="1" class="table table-striped table-responsive-md">
<thead>
<tr>
<th>Mapping Name</th>
<th>Type of Mappings</th>
<th>Table Names</th>
<th>System 1 Count </th>
<th>System 2 Count </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="m : ${mdsAcives}">
<td th:text="${m.mappingName}"></td>
<td th:text="${m.type}"></td>
<td th:text="${m.tableName}"></td>
<td th:text="${m.system1Cnt}"></td>
<td th:text="${m.system2Cnt}"></td>
<td th:style="${m.system1Cnt} eq ${m.system2Cnt} ? 'color: red;' : 'color: green;'}}" th:text="TRUE or FALSE"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You can do something like this:
<tr th:class="${your condition}? 'green' : 'red'">
I assume you have defined two CSS classes to make the row green or red.
Related
I want to add the selected users to a separate table from the list of all users. Similar to the Trello feature, just # and tag their name. I have no idea what to write this function. Any ideas?
This is the form on my interface, and I do not know what to do next in the controller and the form block.
<div class="tab-pane fade" id="group-add-members" role="tabpanel">
<div class="users-manage" data-filter-list="form-group-users">
<div class="mb-3">
<div class="form-group row">
<textarea class="form-control col" name="group-description"
placeholder="Add users by email, each email separated by
commas
e.g: matt#.edu.com, joe#edu.com" rows="3">
</textarea>
</div>
<div class="row align-items-center">
<div class="col">
<button class="btn btn-outline-primary" type="button">
<i class="fad fa-user-plus"></i>Add</button>
<span> or </span>
</div>
<div class="d-none d-md-block col-4 col-lg-5 text-right">
</div>
</div>
<div class="row align-items-center mt-2">
<div class="d-block d-md-none d-sm-block ml-2">
</div>
</div>
</div>
<hr>
<h6>Member info</h6>
<div class="row justify-content-center">
<div class="table-responsive mt-3">
<table class="stripe" id="example" style="width:100%">
<thead>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>\
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-left">My name</td>
<td class="text-left">qnv164#edu.com</td>
<td class="text-left">123456789</td>
<td>
<span class="ic-dark"><i class="fad fa-trash-alt"></i></span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- end div table responsive -->
</div>
<!-- end div row -->
</div>
</div>
{{ profile->description ?? 'Not Available' }}
I'm using larashop admin panel.The datatable shows blank spaces below the datatable..The height blank spaces increases with increase in datatable entries.I don't know what to do..
I tried some css.but none of them helped me.
#extends('templates.admin.layout')
#section('title', 'All Courses')
#section('content')
<div class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Courses <i class="fa fa-plus"></i> Create New </h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable-buttons" class="table table-responsive">
<thead>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
#if(count($courses))
#foreach ($courses as $row)
<tr>
<td>{{$row->name}}</td>
<td>
<i class="fa fa-pencil" title="Edit"></i>
<i class="fa fa-trash-o" title="Delete"></i>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#stop
The screenshot of the issue is provided..please check...
https://i.stack.imgur.com/avqf5.png
I am creating a friends component that lists users friends based on a response from an endpoint.
I want to render the responses into rows of a table as part of this I would like to use the bootstrap striped-table class
https://getbootstrap.com/docs/4.0/content/tables/#striped-rows
when I do a v-for the table renders correctly but the rows are only showing one background color
This is my template code
<template>
<div>
<h5 class="mb-4">Friends</h5>
<table class="table table-borderless table-striped ">
<tbody>
<div v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</div>
</tbody>
</table>
<div v-if="!UserStore.friends">
<h6>You don't have any friends :(</h6>
Lets solve that Right now!
</div>
</div>
</template>
You should use a template element to render these rows. .table-striped works with sibling rows and in your code the rows are not siblings because they each have a div parent, so each row is seen as the first row.
<tbody>
<template v-for="(friend, index) in UserStore.friends">
<tr>
<td class="text-center" style="width: 100px;">
<img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
</td>
<td>
{{friend.name}}<br>
<small>29 years old on Friday</small>
</td>
<td class="text-center" style="width: 80px;">
<i class="fa fa-gift"></i>
</td>
</tr>
</template>
</tbody>
My question is very simple
I am trying to call this source in my public folder in img folder:
src="img/vcc3logo.png"
But I can't display it on my pdf print form
When the customer print for a certification form it needed to display the image. The file of the print.blade.php is located in resources/views/customer-relations/dashboard/print.blade.php
Here is the code in my print.blade.php
{{-- <div class="content">
<div class="clearfix"></div>
<div class="box-body"> --}}
<img src="" height="50" width="50" style="float: right">
<img src="img/vcc3logo.png" height="50" width="50" style="float: left">
<div class="container">
<div class="row">
<div class="text-center">
<p class="text-center maliit">
Republic of the Philippines<br>
National Capital Region<br>
<font>City Government of Valenzuela</font><br>
Office of the City Mayor<br>
Valenzuela City Command and Communications Center<br>
2nd Floor, City ALERT Center, Mc-Arthur Hi-way, Malinta, Valenzuela City<br>
</p>
<h3>Application Number:{{ $application_number }}</h3>
</div>
<h5><b>Business Name:</b> {{ $business_name }}</h5>
<h5><b>Owner:</b> {{ $owner }}</h5>
<h5><b>Location:</b> {{ $location }}</h5>
</span>
<table class="table table-hover">
<thead>
<tr>
<th>Fees</th>
<th></th>
<th class="text-center"></th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9"><em>Inspection Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $inspection_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Certificate Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $cert_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Local Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $local_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Others Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $others_fee }}</td>
</tr>
</tbody>
</table>
<p><i>Note: Please print and present to Customer Relations Officer</i></p>
</td>
</div>
{{-- </div>
</div>
</div>
--}}
I tried to change it to
src="url('/img/cctv_camera.jpg')"
but ended up with this error:
(1/1) RuntimeException
The exit status code '1' says something went wrong:
stderr: "Loading pages (1/6)
If image file is located inside public folder then you need to add asset() which give full path of image like
<img src="{{asset('/img/vcc3logo.png')}}" height="50" width="50" style="float: left">
I think you can try this hope its help for you :
<img src="{{url('')}}/img/vcc3logo.png" height="50" width="50" style="float: left">
OR
<img src="{{asset('/img/vcc3logo.png')}}" height="50" width="50" style="float: left">
Hope this work for you !!!
I'm really new to MVC hope you can give me a detailed instructions on this.
I have a query in my repository that returns pending users who have a certain role_id. Now my issue is this I when the administrator clicks on the anchor tag of id idMessenger below
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
I want to show the pending messengers only in the
<div class="col-md-2 left-aside">
<div class="scrollable">
<ul class="inbox-nav capitalize-font">
<li>All Pending Applications </li>
<li>Clients<span class="label label-danger pull-right">{{$elderly->count()}}</span></li>
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
</ul>
</div>
</div>
<!-- /.left-aside-column-->
<div class="col-md-10 right-aside">
<div class="scrollable">
<div class="table-responsive">
<table id="datable_1" class="table display table-hover contact-list" data-page-size="10">
<thead>
<tr>
<th>Appication ID</th>
<th>Name</th>
<th>Email</th>
<th>Senior Citizen Number</th>
<th>Role/Submitted as</th>
<th>Date of Submission</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach($allPending as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->scn}}</td>
<td><span class="label label-danger">{{$user->roles->name}}</span></td>
<td>{{$user->created_at}}</td>
<td>
<i class="fa fa-check"></i>Approve
</td>
<td>
<i class="fa fa-trash"></i>Delete
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
Can you please teach me how to do it in ajax.