Vue js task if statement - javascript

Hello, I have a little task in vue js and have a little problem, I need If statement which makes ul border color green if price < 140. I need help, thank you.I tried some ways but didn't work.
See the code below:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
ul{
border:2px solid black;
width:450px;
}
#app{
display: flex;
justify-content: center;
}
#card{
margin-left:5px;
}
</style>
<body>
<div id = "app" >
<div id ="card" v-for="post in posts" >
<ul>
<img :src="post.img" :value="post.id">
<li>{{post.title}}</li>
<li>{{post.price}}</li>
<li>{{post.date}}</li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
var card = new Vue({
el: '#app',
data: {
posts: [
{ id: 1, title: 'Cat', price: 145, date: "1 year ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' },
{ id: 2, title: 'Cat2', price: 80, date: "2 years ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' },
{ id: 3, title: 'Cat3', price: 180, date: "3 years ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' }
],
baseStyles: {
borderColor:'green',
},
}
})
Solved

You can achieve it with the ternary operator
<ul :style="{ 'border-color': post.price < 140 ? 'green' : '' }">
<img :src="post.img" :value="post.id">
<li>{{post.title}}</li>
<li>{{post.price}}</li>
<li>{{post.date}}</li>
</ul>

Related

Unique checkbox filters for each event

I am using fullcalendar V4, which my question is how to make a unique checkbox filter for each event, I use two events with eventSources because in my project made in Laravel I extract the data from two different modules, one for tasks and the other for processes, and searched information and examples of how to do the filter but I always see that they do it from a single event or from a previous version of fullcalender and when I want to do it for both events I have errors
This is an example of how my calendar is in my Laravel project
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid','interaction','timeGrid', 'list'],
header:{
left:'prev,next',
center:'title',
right:'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
{
events: [
{
id :'1',
title : 'Process Module-Deliver date',
start : '2022-11-02',
textColor: '#000000',
backgroundColor: '#8aff8e',
groupprocess : 'deliver',
},
{
id :'2',
title : 'Process Module-Finished Date',
start : '2022-11-03',
textColor: '#000000',
borderColor : '#ebe315',
groupprocess : 'finished',
},
{
id :'3',
title : 'Process Module-Meeting date',
start : '2022-11-23',
textColor: '#000000',
backgroundColor: '#eb6315',
groupprocess : 'meeting',
},
],
},
{
events: [
{
id :'1',
title : 'Tasks Module-Transmitter',
start : '2022-11-23',
textColor: '#000000',
backgroundColor: '#1543eb;',
grouptasks : 'transmitter',
},
{
id :'2',
title : 'Tasks Module-Receiver',
start : '2022-11-22',
textColor: '#000000',
backgroundColor: '#15bdeb;',
grouptasks : 'receiver',
},
{
id :'3',
title : 'Tasks Module-Admin',
start : '2022-11-03',
textColor: '#000000',
backgroundColor: '#7215eb',
grouptasks : 'admin',
},
],
}
],
});
calendar.render();
});
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css"/>
<style>
.scrolling-wrapper-flexbox {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.card {
flex: 0 0 auto;
margin-right: 3px;
}
</style>
</head>
<body>
<div class="scrolling-wrapper-flexbox">
<div class="card" style="background: aqua;">
<h4>Filter Process Module</h4>
<input id="deliver" name="deliver" type="checkbox" value="deliver" data-type="groupprocess">Deliver</input>
<input id="finished" name="finished" type="checkbox" value="finished" data-type="groupprocess">Finished</input>
<input id="meeting" name="meeting" type="checkbox" value="meeting" data-type="groupprocess">Meeting</input>
</div>
<div class="card" style="background:cadetblue;">
<h4>Filter Tasks Module</h4>
<input id="transmitter" name="transmitter" type="checkbox" value="transmitter" data-type="grouptasks">Transmitter</input>
<input id="receiver" name="receiver" type="checkbox" value="Hamburg" data-type="grouptasks">Receiver</input>
<input id="admin" name="admin" type="checkbox" value="admin" data-type="grouptasks">Admin</input>
</div>
</div>
<div id='calendar'></div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/moment-timezone/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/moment/main.min.js"></script>
</body>
I appreciate if you could help me or give an example of how I could implement it

Compare a specific object value and do something if

Just started to learn Angular and I am facing an issue as described below:
Given the following scenario:
var app = angular.module('test', []);
app.controller('MainController', ['$scope',
function($scope) {
$scope.title = 'This is another test';
$scope.promo = 'More or less'
$scope.products = [{
name: 'Product 1',
price: 19,
stock: 20
}, {
name: 'Product 2',
price: 19,
stock: 12
}, {
name: 'Product 3',
price: 19,
stock: 3
}, {
name: 'Product 4',
price: 19,
stock: 0
}, ]
}
]);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<style>
.stock {
color: green;
}
.zeroStock {
color: red;
}
.buy {
background-color: green;
color: #fff;
margin-bottom: 20px;
border: 0;
padding: 10px 20px;
}
.outOfStock {
background-color: red;
}
</style>
<body ng-app="test">
<div class="main" ng-controller="MainController">
<div class="test" ng-repeat="product in products">
<div class="name"> {{product.name}} </div>
<div class="price"> {{product.price}} </div>
<div id="stock" class="stock"> {{product.stock}} </div>
<button class="buy">BUY</button>
</div>
</div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
</body>
</html>
What I'd like to achieve is:
Create a function or directive which will compare each stock quantity
if stock = 0:
button get class: "outOfStock"
button copy will change from "BUY" to "OUT OF STOCK"
stock copy will get the class: "zeroStock"
My apologies if this might sounds silly or if might be a duplicate question, I did try to look for it, but I have potentially used the wrong terminology.
Thank you for your help.
You can use ng-class and ng-if for this, there is even no need for any function:
Example:
var app = angular.module('test', []);
app.controller('MainController', ['$scope',
function($scope) {
$scope.title = 'This is another test';
$scope.promo = 'More or less'
$scope.products = [{
name: 'Product 1',
price: 19,
stock: 20
}, {
name: 'Product 2',
price: 19,
stock: 12
}, {
name: 'Product 3',
price: 19,
stock: 3
}, {
name: 'Product 4',
price: 19,
stock: 0
}, ]
}
]);
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<style>
.stock {
color: green;
}
.zeroStock {
color: red;
}
.buy {
background-color: green;
color: #fff;
margin-bottom: 20px;
border: 0;
padding: 10px 20px;
}
.outOfStock {
background-color: red;
}
</style>
<body ng-app="test">
<div class="main" ng-controller="MainController">
<div class="test" ng-repeat="product in products">
<div class="name"> {{product.name}} </div>
<div class="price"> {{product.price}} </div>
<div id="stock" class="stock" ng-class="{'zeroStock': product.stock == 0}"> {{product.stock}} </div>
<button class="buy" ng-if="product.stock != 0">BUY</button>
<button ng-if="product.stock == 0" class="outOfStock">Out Of stock</button>
</div>
</div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
</body>
</html>

combining two functionality into one for kendo grid

I have kendo grid separately in a fiddle,
I have delete function seprately in a fiddle
when I select ThreeDots in each row in the grid it should show delete in small popup and when you click delete confirmation popup should open up.
after I click yes it should delete that particular row and when I slect no it should not
delete.
trying to display my confirmation box for delete in jquery way..providing that code below
can you guys tell me how to combine my code.
providing code and fiddle below
http://jsfiddle.net/cjyh8Lyc/4/
https://jsfiddle.net/9qpLukrL/
<div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>
<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
$('.sports').show();
$('.sports').hide();
#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}
.sports {
display: none;
}
Not sure what is the purpose of your having delete function in the separate since kendo has built in function that can remove the row.You can attach a javascript function to delete(your code in a separate file for.
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
navigatable: true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]
}).data("kendoGrid");
grid.element.on('click','.mybutton',function(){
//var dataItem = grid.dataItem($(this).closest('tr'));
//alert(dataItem.Name + ' was clicked');
//built in kendo function to remove row
grid.removeRow($(this));
})
</script>
</body>
</html>
Jsbin Demo demo with delete confirmation

Kendo UI Menu items select issue

Issue: Clicking on the image in the kendo menu item, the select event is not triggering.
what i have tried: See the sample code below
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/menu/images">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Menu with images</h4>
<ul id="menu-images"></ul>
</div>
<script>
$("#menu-images").kendoMenu({
dataSource: [
{
text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
items: [
{
text: "Top News",
imageUrl: "../content/shared/icons/16/star.png",
select: function (e) {
alert('Clicking on image select event is not triggering')
}
},
{ text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" },
{ text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" },
{ text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }]
},]
});
</script>
<style>
#menu-sprites .k-sprite {
background-image: url("../content/shared/styles/flags.png");
}
.brazilFlag {
background-position: 0 0;
}
.indiaFlag {
background-position: 0 -32px;
}
.netherlandsFlag {
background-position: 0 -64px;
}
.historyIcon {
background-position: 0 -96px;
}
.geographyIcon {
background-position: 0 -128px;
}
</style>
</div>
</body>
</html>
Description:
I have edited this code sample taken from Telerik demo. in the above code i have added the items for Golf. that also have the select function which is what i am talking about. after executing this. If i click on the text "Top News" the alert will trigger.The alert is not working when i click/select on the image.
Posting in Telerik forum is only applicable for licensed users. I dont have.
Let me know if any body come across these kind of issue.
Thanks
Dev
It seems like you have nested the event-declaration within the dataSource-item.
Just move the declaration to the menu-level and it should work.
$("#menu-images").kendoMenu({
select: function(e) {
alert($(e.item).children('.k-link').text())
}
dataSource: [
{
text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
items: [
{
text: "Top News",
imageUrl: "../content/shared/icons/16/star.png"
},
{ text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" },
{ text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" },
{ text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }]
},]
});
Using $(e.item) you can go further and figure out which item has been selected. Have a look the event-section of the online-demo. http://demos.telerik.com/kendo-ui/menu/events

EON Chart not visible on page load

I have a working EON chart that is not displaying on initial page load resulting in a blank page. If I switch to another browser tab, and then straight back to the graph tab, the graph then shows.
Here is the HTML / JavaScript and the CSS.
Your help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<link rel="stylesheet" type="text/css" href="poolstyle.css">
<head>
</head>
<body>
<script type="text/javascript">
var pubnub = PUBNUB.init ({publish_key: 'xxx',
subscribe_key: 'xxx',
error: function (error) {console.log('Error:', error)}});
var GraphChannel = "xxx";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
</body>
</html>
Here is the CSS:
.outer {
margin: 0 auto;
width:1500px;
}
.inner{
display: table;
float: left;
width: 30%;
}
Couple things going on here:
move your library references to inside the <head> tags
but the real issue: your EON code is referencing #charttemp but it is not rendered yet because the that <div> is below the EON script and that is why it requires a tab lose focus/gain focus to render first time. So just move your <div>'s above your EON script.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<!-- <link rel="stylesheet" type="text/css" href="poolstyle.css"> -->
</head>
<body>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
<script type="text/javascript">
var pubnub = PUBNUB.init ({
publish_key: 'pubkey', subscribe_key: 'subkey',
error: function (error) {console.log('Error: ', error)}});
var GraphChannel = "a";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
</body>
</html>

Categories

Resources