Laravel : change the class li if the user answered the survey - css

I want to change class for each class of if the user answered the survey before
I tried to use if condition but nothing changed
Controller :
public function home(Request $request)
{
$surveys = Survey::get();
foreach ($surveys as $survey) {
$user_id = auth()->user()->id;
$user_ip = request()->ip();
$hasAnswer = \App\Answer::where(['user_id'=>$user_id , 'survey_id' => $survey->id, 'last_ip'=>$user_ip])->exists();
}
return view('home', compact('surveys','hasAnswer'));
}
view blade :
<div class="col-12">
<ul class="list-group">
#forelse ($surveys as $survey)
#if($hasAnswer)
<li class="list-group-item list-group-item-success">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#else
<li class="list-group-item">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#endif
#empty
<p class="flow-text center-align">Nothing to show</p>
#endforelse
</ul>
</div>
Nothing changed even i tried to answer for some surveys but no class changed

public function home(Request $request)
{
$surveys = Survey::get();
$user_id = auth()->user()->id; // you don't need to iterate over and over again for the same value
$user_ip = request()->ip(); // you don't need to iterate over and over again for the same value
foreach ($surveys as $survey) {
$hasAnswer[] = \App\Answer::where(['user_id'=>$user_id , 'survey_id' => $survey->id, 'last_ip'=>$user_ip])->exists();
}
return view('home', compact('surveys','hasAnswer'));
}
blade file:
<div class="col-12">
<ul class="list-group">
#forelse ($surveys as $key => $survey)
#if($hasAnswer[$key])
<li class="list-group-item list-group-item-success">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#else
<li class="list-group-item">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#endif
#empty
<p class="flow-text center-align">Nothing to show</p>
#endforelse
</ul>
</div>
Note: the code is not tested.

Related

Router Link Active not working in the below scenario, is their any alternate way to activate button dynamically?

HTML code
<div class="card-header">
<h5>Refill by date</h5>
<div class="card-header-right">
<nav class="navbar bg-faded ">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('branch'); getFranchiseRefillsByDateAndBranch()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By branch</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('product'); getFranchiseRefillsByDateAndProduct()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By product</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('list'); getFranchiseRefillsByDateAndList()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> Refill list</i>
</button>
</li>
</ul>
</nav>
</div>
</div>
part of TS code
getFranchiseRefillsByDateAndBranch() {
this.items = [];
var hrchyIds = this.jwtHelperService.getFRefillHrchyIds();
var ym = this.localStorage.retrieve('frym');
if (hrchyIds) {
this.refillService.getFranchiseRefillsByDateAndYear(hrchyIds, ym, "branch", this.page, this.rec).subscribe(val => {
this.items = val;
});
}
}
CSS code
.nav-item.active button i{
color: #3D94CD !important;
}
I am trying to change color of active button using router link active but this method does not work in this case, is their any alternate way of adding class dynamically, based on current click.
routerLinkActive works if there was a routerLink on this element.
Keep currentActiveItem variable in ts file. Set some default value say "branch"
currentActiveItem : string = "branch"
Change value of this variable in setView function.
And additionally also use ngClass as following on correspondiong li elements.
[ngClass]="{'active' : currentActiveItem == 'branch'}"
[ngClass]="{'active' : currentActiveItem == 'product'}"
[ngClass]="{'active' : currentActiveItem == 'list'}"

Recursion in Play framework 2.5.X

I have a play template where I loop through a list of objects that have nested lists, and I'm displaying the items iteratively using nested for loops.
-skillList is a List[Skill]
-Skill is an object defined in a model
-skillObject.getChildrenList() return a list[Skill]
What I would like to do is be able to display this but using some type of recursion so that if the level of nesting of mylist changes I don't have to change the whole template. So is there any way to do this in a recursive way ?
<div class="custom-dd dd dd-nodrag" id="nestable_list_1">
<ol class="dd-list">
#for(skill <- skillList) {
<li class="dd-item">
<div class="dd-handle dd-nodrag row">
<span class="dd-nodrag" id="content_#skill.getCleanUri()"> #skill.getLabel() </span>
</div>
<ol class="dd-list">
#for((child, indexChild) <- skill.getChildrenList().zipWithIndex) {
<li class="dd-item" data-id="#indexChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#child.getCleanUri()"> #child.getLabel() </span>
</div>
<ol class="dd-list">
#for((grandChild, indexGrandChild) <- child.getChildrenList().zipWithIndex) {
<li class="dd-item" data-id="#indexGrandChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#grandChild.getCleanUri()"> #grandChild.getLabel() </span>
</div>
</li>
}
<div class="text-left addNew" id="meta-#index">
<span>
<button class="btn btn-icon w-xs plusBtn
btn-primary waves-effect waves-light toggleButton" data-toggle="modal"
data-target="#custom-width-modal"> <i class="fa fa-plus" aria-hidden="true"></i>
</button>
</span>
</div>
#(index = index + 1)
</ol>
</li>
}
</ol>
</li>
}
</ol>
Thanks in advance for any answer.
You can create a separate template that takes List[Skill] as argument and renders SkillObjects in provided list and children of these SkillObjects. Then use that template at first nested level in your main page template. Like following -
SkillTemplate.scala.html
#(skills: List[Skill])()
<ol class="dd-list">
#for((child, indexChild) <- skills.zipWithIndex) {
<li class="dd-item" data-id="#indexChild">
<div class="dd-handle dd-nodrag row">
<span id="content_#child.getCleanUri()"> #child.getLabel() </span>
</div>
#SkillTemplate(child.getChildrenList())
<div class="text-left addNew" id="meta-#index">
<span>
<button class="btn btn-icon w-xs plusBtn
btn-primary waves-effect waves-light toggleButton" data-toggle="modal"
data-target="#custom-width-modal"> <i class="fa fa-plus" aria-hidden="true"></i>
</button>
</span>
</div>
#(index = index + 1)
</li>
}
</ol>
I have not been able to test it

can't submit a form using redactor in symfony

I have created a form with a textarea in Symfony2 using form-builder.
I want to use redactor in my form for text editing . Everything works fine until i didn't use redactor library. But when i applied class redactor to my textarea, it doesn't get submitted in my post reuqest. I tried to set required=false also, but that didn't work either.
Form-buider:
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('templateTitle', 'text', array('label' => 'template.fields.name'))
->add('templateType', 'text', array('label' => 'template.fields.type'))
->add('templateCode','textarea',array('required'=>false))
->add('submit', 'submit', array('label' => 'template.fields.submit'));
}
HTML:
<div style="margin-top:0; margin-bottom: 20px;">
{{ form_widget(create_form.templateCode,{ 'attr': {'class': "redactor"} }) }}
{{ form_errors(create_form.templateCode) }}
</div>
<link href="{{ asset('bundles/theme/editors/redactor/redactor.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('bundles/theme/editors/redactor/redactor.js') }}"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$('.redactor').redactor({
minHeight: 300
});
}
);
</script>
Rendered Code of redactor in HTML :
<div class="tab-pane active" id="code">
<div style="margin-top:0; margin-bottom: 20px;">
<div class="redactor_box"><ul class="redactor_toolbar" id="redactor_toolbar_0"><li>
<a href="javascript:;" title="HTML" tabindex="-1" class="redactor_btn redactor_btn_html"
></a></li><li class="redactor_separator"></li>
<div class="redactor_dropdown redactor_dropdown_box_formatting" style="display: none;">
Normal text
Quote
Code
Header 1
Header 2
Header 3
Header 4
Header 5
</div>
<li>
</li>
<li class="redactor_separator"></li>
<li>
</li>
<li>
</li>
<li>
</li>
<li class="redactor_separator"></li>
<li>
</li>
<li>
</li>
<li>
</li>
<li></li>
<li class="redactor_separator"></li>
<li></li>
<li></li>
<div class="redactor_dropdown redactor_dropdown_box_table" style="display: none;">
Insert Table
<a class="redactor_separator_drop" tabindex="-1"></a>
<a href="#" class=" redactor_dropdown_insert_row_above" tabindex="-1">
Add Row Above</a><a href="#" class=" redactor_dropdown_insert_row_below" tabindex="-1">
Add Row Below</a><a href="#" class=" redactor_dropdown_insert_column_left" tabindex="-1">
Add Column Left</a><a href="#" class=" redactor_dropdown_insert_column_right" tabindex="-1">
Add Column Right</a><a class="redactor_separator_drop" tabindex="-1"></a>
<a href="#" class=" redactor_dropdown_add_head" tabindex="-1"
>Add Head</a>
Delete Head
<a class="redactor_separator_drop" tabindex="-1"></a>
Delete Column
Delete Row
Delete Table
</div>
<li></li>
<div class="redactor_dropdown redactor_dropdown_box_link" style="display: none;">
Insert link
Unlink
</div>
<li></li>
<li class="redactor_separator"></li>
<div class="redactor_dropdown redactor_dropdown_box_alignment" style="display: none;">
Align text to the left
Center text
Align text to the right
Justify text
</div><li>
</li>
<li class="redactor_separator"></li><li></li></ul><div class="redactor_redactor redactor_editor" contenteditable="true" dir="ltr" style="min-height: 300px;"><p>​</p>
</div>
<textarea id="template_type_templateCode" name="template_type[templateCode]" class="redactor" dir="ltr" style="display: none;"></textarea></div>
<ul><li>This is my error message</li></ul>
</div>
<br>
<div class="pull-right" id="submit1">
<button type="submit" action="submit" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
Any one can help ?
I can see that your textarea is kept hidden. This must have been done by the texteditor plugin that you have used. But you need to also check that the edited text is copied to your actual textarea before submitting your form.
If this is your problem then then solution is mentioned here:
Imperavi Redactor content not being copied over to hidden textarea

how to parse json property in strut2

the follow code is working when i save "name" property as simple string data,
but now I want save the "name" as JSON data, such as
{"en":"White Rice","cn":"白米","th":"ข้าวขาว"}, and display the name value according to locale language. How can I do?
<s:iterator value="categorylist">
<li class="mn_menu-active">
<a href="#">
<span><s:property value="name" /></span>
<div class="clear"></div>
</a>
<ul>
<s:iterator value="children">
<li>
<a href="#">
<span class="ms_txt"><s:property value="name" /></span>
<div class="clear"></div>
</a>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>
Hear I implement a class to handle it.
package com.tsd.json;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.util.ValueStack;
import java.util.Locale;
import net.sf.json.JSONObject;
public class LocaleHandler {
public static String Locale(String name)
{
ValueStack stack = ActionContext.getContext().getValueStack();
String result="";
HttpServletRequest request = ServletActionContext.getRequest();
Locale locale = (java.util.Locale)request.getSession().getAttribute("WW_TRANS_I18N_LOCALE");
String jsonData =(String)stack.findValue(name);
JSONObject json=JSONObject.fromObject(jsonData);
if(locale ==null)
{
HttpServletResponse response=ServletActionContext.getResponse();
locale=response.getLocale();
}
if (locale instanceof Locale)
{
result= json.getString(locale.getLanguage()+"_"+locale.getCountry());
}
return result;
}
}
and modify the jsp as follow:
<s:iterator value="categorylist">
<li class="mn_menu-active">
<a href="#">
<span>
<%=LocaleHandler.Locale("name") %>
</span>
<div class="clear"></div>
</a>
<ul>
<s:iterator value="children">
<li>
<a href="#">
<span class="ms_txt"> <%=LocaleHandler.Locale("name") %></span>
<div class="clear"></div>
</a>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>

Boostrap: .affix-bottom doesn't move to the bottom of its parent

I am using Bootstrap's affix side-navigation. When you scroll down to the bottom of the element which the navigation refers to, the class .affix-bottom is applied to the navigation element and it should scroll (exactly in the way the side navigation in the Boostrap documentary works).
However, when the class changes to affix-bottom and the following styles are applied, the affix-navigation moves to the top of the page (and out of the viewport).
affix-bottom {
position: absolute;
top: auto;
bottom: 200px;
}
I am not sure wether the issue is related to Bootstrap. I have compared the styles Bootstrap natively uses and the styles I use and they are exactly the same.
This is the html I use:
<div class="row">
<div class="span3 bs-docs-sidebar" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav affix-top">
<li class="">
<a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go to anchor1</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go to anchor2</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go to anchor3</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go to anchor4</a>
</li>
<li class="">
<a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go to anchor5</a>
</li>
<li class="active">
<a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">Go to anchor6</a>
</li>
<li>
<a>
<button class="btn pull-center">Contact</button>
<button class="btn pull-center">Call</button>
<p class="caption">on weekdays</p>
</a>
</li>
</ul>
</div>
<div class="span9">
...
</div>
As Bootstrap's Affix is having some issues, I wrote my own script which changes the classes of the affix from .affix-top to .affix when you scroll further than the top-position of the .row element and when you scroll to the bottom of the .row element, it will add the class .affix-bottom.
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#anchor1').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#anchor1').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
This keept my up all night and any help would be greatly appreciated.
Edit: Ok, I finally fixed it. However, it's more of a workaround. I changed the JS to the following:
$(document).ready(function() {
$(window).scroll(function(){
if( $('.nav.nav-list.bs-docs-sidenav').height() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top + $('.row .span9').height() - $('.navbar').height() - $(window).scrollTop() - 40 ) ) ) {
$(".span3.bs-docs-sidebar").css({
'position': 'relative',
'height': $('.row .span9').height()
});
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-bottom');
}
else {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-bottom');
if( $(window).scrollTop() >= (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').addClass('affix');
}
else if( $(window).scrollTop() < (($('#allgemeine-fragen-zu-meinunterricht-de').offset().top) - ($('.navbar').height()) - 20)) {
$('.nav.nav-list.bs-docs-sidenav').addClass('affix-top');
$('.nav.nav-list.bs-docs-sidenav').removeClass('affix');
}
}
});
});
I have no idea why it's working in Bootstrap without the position:relativ and the equivalent height for the span3.
try this
just add class affix to div
<div class="span3 bs-docs-sidebar affix affix-top" id="navfaq">
<ul class="nav nav-list bs-docs-sidenav ">
<li class=""><a onclick="scrollToAnchor('anchor1'); return false;" href="#anchor1">Go
to anchor1</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor2'); return false;" href="#anchor2">Go
to anchor2</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor3'); return false;" href="#anchor3">Go
to anchor3</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor4'); return false;" href="#anchor4">Go
to anchor4</a> </li>
<li class=""><a onclick="scrollToAnchor('anchor5'); return false;" href="#anchor5">Go
to anchor5</a> </li>
<li class="active"><a onclick="scrollToAnchor('anchor6'); return false;" href="#anchor6">
Go to anchor6</a> </li>
<li><a>
<button class="btn pull-center">
Contact</button>
<button class="btn pull-center">
Call</button>
<p class="caption">
on weekdays</p>
</a></li>
</ul>
</div>

Resources