I have problem regarding the if else condition within the listview in the nativescript (js and xml).
I currently want to make the listview highlighted when the actual date already behind the plan date. in other word, want to indicate the listview as late job so that people are aware on it.
all the late job has the value of 1 which I want to use it to differentiate the highlight.
<lv:RadListView.listViewLayout>
<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>
<lv:RadListView.itemTemplate>
<StackLayout class="ListStackOuter" tap="onJobListTap">
<GridLayout class="ListGrid" columns="80, *, 30" rows="auto,auto" >
<Label id="lblJobId" class="ListLabelMediumBold" text="{{ job_id }}" row="0" col="0" textWrap="true" colSpan="2"/>
<Label id="lblNext" class="ListLabelNext" text=">" row="0" col="2"/>
<Label id="lblJobDesc" class="ListLabelSmall" text="{{ job_desc }}" row="1" col="0" colSpan="3"/>
<Label id="lblJobLate" class="ListLabelSmall" text="{{ late_job }}" row="1" col="2" colSpan="3"/>
</GridLayout>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
</ScrollView>
I expect all the job with late_job status = 1 will be in red colour. while others will remain normal.
I have created a playground for you here. You can check value of late_job e.g class="{{ (late_job === '1') ? 'list-group-item-heading' : ''}}"
You can use ternary opeartor like below
<ListView class="list-group" items="{{ countries }}" itemTap="{{ onItemTap }}"
style="height:1250px">
<ListView.itemTemplate>
<FlexboxLayout flexDirection="row" class="list-group-item">
<Image src="{{ imageSrc }}" class="thumb img-circle" />
<Label text="{{ name }}" class="{{ (name === 'Australia') ? 'list-group-item-heading' : ''}}"
verticalAlignment="center" style="width: 60%" />
</FlexboxLayout>
</ListView.itemTemplate>
</ListView>
and in .js
countries: [
{ name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
{ name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
{ name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
{ name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
{ name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
{ name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
],
Related
I have a questionnaire which shows questions and their answers with vuejs.
django will handle the backend.
I want to get the question id and answer from the questionnaire and send it to backend as json object.
here is my question component:
<template>
<div>
<div v-for="section in sections.slice(sectionStart, sectionEnd)" :key="section.id">
<div v-for="question in section.questions" :key="question.id">
<!-- Single Choice -->
<div v-show="question.type === 'Single Choice'" :id="question.id">
<p class="py-4 font-medium leading-8">{{ question.question_text }}</p>
<input type="hidden" :value="question.question_text" v-model="question.id">
<div class="flex py-1" v-for="choice in question.choices" :key="choice.id">
<input class="h-5 w-5" type="radio" :name="question.id" v-model="choice.id" :id="choice.id"/>
<label class="ml-3" :for="choice.id">{{ choice.text }}</label>
</div>
</div>
<!-- Multiple choice -->
<div v-show="question.type === 'Multiple Choice'" :id="question.id">
<p class="py-4 font-medium leading-8">{{ question.question_text }}</p>
<div class="flex py-1" v-for="choice in question.choices" :key="choice.id">
<input type="checkbox" class="h-6 w-6" :name="choice.id" :id="choice.id">
<label :for="choice.id" class="ml-3">{{ choice.text }}</label>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sections: data.sections,
}
},
props:[
'sectionStart',
'sectionEnd'
]
};
</script>
Update 1
data.sections comes from django:
{% block extrahead %}
{% render_bundle 'index' 'css' %}
<script> let data = {{ data|safe }};</script>
{% endblock %}
and the structure of data:
{
section: [
0: {
id: 0,
desc: "...",
questions: [
0: {
id: 0,
text: "question text....?",
choices: [
0: {id: 0, text: "choice 1"},
1: {id: 1, text: "choice 2"},
2: {...}
]
},
1: {...},
]
},
1: {...},
2: {...}
]
}
Update 2
the json format I want to have:
responses: {
question_id: response_id,
}
How can I get question id and it's answer and save these value to json object and then send it to backend?
First you need to set up your v-model. Currently you refer to things like v-model="choice.id" which aren't existing in your data properties. How the structure of your v-model needs to be depends on how you want to pass the data.
As an example you could pass it like you already tried, with v-model. But instead of v-model="choice.id" we use v-model="userAnswers[section.id][question.id][choice.id]" after creating it in our data properties:
data() {
return {
sections: data.sections,
userAnswers: {}
}
}
So using userAnswers[section.id][question.id][choice.id] will generate something like this:
{
0: { // First section
0: { // First question
0: false, // Choices with true or false
1: true,
2: false,
3: false
}
},
1: {
...
}
}
EDIT: Usage with the provided structure
So you provided the following structure:
responses: {
question_id: response_id,
}
This is only possible for questions with only one answer and only if every answer has an unique id outside of their section. If the first question of a section always has 0 as their id, that won't work. But if they have, thatn it is simply this: userAnswers[question.id] as v-model of the radio buttons while they to provide the response_id as their values.
I read this solution but that doesn't really answer the question. I am using formik and semantic-ui-react.
Is is possible to use Yup with semantic-ui-react?
If yes could someone provide an example?
yes it is possible , Here is one way to do it. paste this code in codesandbox.io and install the dependencies like formik yup and semantic-ui-react
import React from "react";
import { render } from "react-dom";
import { Formik, Field } from "formik";
import * as yup from "yup";
import { Button, Checkbox, Form } from "semantic-ui-react";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const App = () => (
<>
<Formik
initialValues={{
firstname: "",
lastname: ""
}}
onSubmit={values => {
alert(JSON.stringify(values));
}}
validationSchema={yup.object().shape({
firstname: yup.string().required("This field is required"),
lastname: yup.string().required()
})}
render={({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit
}) => {
return (
<Form>
<Form.Field>
<label>First Name</label>
<input
placeholder="First Name"
name="firstname"
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Field>
{touched.firstname && errors.firstname && (
<div> {errors.firstname}</div>
)}
<Form.Field>
<label>Last Name</label>
<input
placeholder="Last Name"
name="lastname"
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Field>
{touched.lastname && errors.lastname && (
<div> {errors.lastname}</div>
)}
<Form.Field>
<Checkbox label="I agree to the Terms and Conditions" />
</Form.Field>
<Button type="submit" onClick={handleSubmit}>
Submit
</Button>
</Form>
);
}}
/>
</>
);
render(<App />, document.getElementById("root"));
I have a django sign up form that I recently changed to a react modal window, I created the modal successfuly like this
var WindowModal = React.createClass({
getInitialState(){
return {showModal: false};
},
close(){
this.setState({showModal: false});
},
open(){
this.setState({showModal: true});
},
handleEmailChange: function(e) {
this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
this.setState({password: e.target.value});
},
handleSubmit(){
console.log("EMail: " + this.state.email);
console.log("Password: " + this.state.password);
},
render () {
return (
<div>
<a onClick={this.open} className="action action-signin">Already have a Studio account? Sign In</a>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title className="modal-title">Sign In</Modal.Title>
</Modal.Header>
<Modal.Body>
<h1>Sign In to Studio</h1>
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange}/>
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={10}>
<FormControl type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button type="submit" onClick={this.handleSubmit}>
Sign in
</Button>
</Col>
</FormGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
});
what I need is when I click on the submit button, my data gets passed to the django view for processing, so i was wondering how i can set my form to have an action attribute that points to the view
You may think of upgrading the django view into an API that accepts login parameters, then in the react's handleSubmit() function, use ajax post to hit that API, then in the callback, returned values from the API will guide you the next steps (display wrong username/password or redirect into another react route)
I'm having an issue with data from my model not being bound. The category in the first each loop is bound fine. If I make a change to the input box, my model reflects that change.
The problem appears to be in the inner each loop. None of my changes in the inner loop are reflected in the model. If I change the inner loop to be just {{#each descriptions}} and use {{this}} instead of {{description}} my model still doesn't reflect the changes.
{{#each amenities}}
{{input type="text" value=category}}
<div><label>{{category}}</label></div>
<ul class="sortable-amenities" style="list-style-type: none;">
{{#each description in descriptions}}
<li>
<div>
<span class="handle glyphicon glyphicon-move pull-left" style="margin-top: 15px; margin-right: 10px;"></span>
{{input type="text" class="form-control input-amenities" name="amenity-description" placeholder="Amenity" value=description}}
<button style="padding-top: 3px;" {{action 'removeAmenity' description}}><span class="glyphicon glyphicon-remove" style=""></span></button>
</div>
</li>
{{/each}}
</ul>
{{/each}}
Sample 'amenities' I'm trying to loop through:
"amenities": [ { "category": "Featured", "_id": "53dc0aeede4be108724ce46a", "descriptions": [ "Floor Plans", "Pool", "Fitness Centre", "Air Conditioning", "Care Centre", "Pets" ] }, { "category": "Extra Features", "_id": "53dc0aeede4be108724ce469", "descriptions": [ "Three places", "Connections", "Appliances", "Breakfast", "Bright rooms", "Marble Flooring", "Ponds", "All Windows", "Organizers" ] }, { "category": "Community", "_id": "53dc0aeede4be108724ce468", "descriptions": [ "Picnic", "Basketball", "Volleyball", "Playground", "School", "Maintenance", "Customer", "Business" ] } ]
The application is written using ASP.NET MVC 3 in vs2010.
I have a knockout template that updates some css and visible bindings using a
dependantObservable.
The issue ONLY occurs when I bind the
value of the select element to the
IntervalID. If this is not bound the
UI is updated as expected.
I have ripped the code out from my main app and created a sample page that does the same binding using standard markup and also templates.
The dependantObservable is called HasChanged.
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.2.0.js" type="text/javascript"></script>
<div data-bind="template: { name: 'intervalTemplate', for:viewModel }">
</div>
<h2>
Not Template</h2>
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
<script id="intervalTemplate" type="text/html">
<div data-bind="style: { color: HasChanged() ? 'red' : 'black' }">
<h2>Template</h2>
IntervalID: <span data-bind="text: IntervalID"></span>
<br />
Start:
<input type="text" data-bind="value: Start">
<br />
End:
<input type="text" data-bind="value: End">
<br />
Interval Type:
<select data-bind="value: IntervalTypeID">
<option value="1">Shift</option>
<option value="2">Break (Paid)</option>
<option value="3">Break (Unpaid)</option>
</select><br />
HasChanged: <span data-bind="text: HasChanged"></span>
</div>
</script>
<script type="text/javascript">
function IntervalModel(data) {
var _this = this;
_this.IntervalID = ko.observable(data.IntervalID);
_this.Start = ko.observable(data.Start);
_this.End = ko.observable(data.End);
_this.IntervalTypeID = ko.observable(data.IntervalTypeID);
_this.OriginalStart = ko.observable(data.Start);
_this.OriginalEnd = ko.observable(data.End);
_this.OriginalIntervalTypeID = ko.observable(data.IntervalTypeID);
_this.HasChanged = ko.dependentObservable(function () {
return !(_this.OriginalStart() == _this.Start() &
_this.OriginalEnd() == _this.End() &
_this.OriginalIntervalTypeID() == _this.IntervalTypeID());
});
}
var viewModel;
$(function () {
var viewModel = {};
viewModel = new IntervalModel({ IntervalID: 1, Start: "09:00", End: "10:00", IntervalTypeID: 2 });
ko.applyBindings(viewModel);
});
</script>
Any help would be much appreciated... I need to use templates as i have lots of these intervals that need to be displayed.
Thanks!
There is an issue logged on github for this one here: https://github.com/SteveSanderson/knockout/issues/133
The issue centers around using numbers for the value of a select option. When a select element uses the value binding, it is updated with the actual value of the element, which is always a string. So, if your observable is 2, it gets set to "2" when the binding is set up. This change seems to cause an issue with any bindings that use that observable that were set up in the template prior to the select element.
So, until this is potentially fixed, you can make it work by passing IntervalTypeID as a string ("2"). An easy way to convert a number to string is to do yourvalue + ''.
Here it is working:
http://jsfiddle.net/rniemeyer/uDSFa/