I'm using a angular masonry directive created by passy and I'm having a problem when the first element have almost 100% of width. In this case all the elements merge in a single column otherwise i think the behaviour is ok.
I created a plunker,to see if anyone out there can help me.
http://plnkr.co/edit/P8kVidzDV97U7mslECJJ?p=preview
<div ng-controller="CarOperatingPanelCtrl">
<div class="one-column">
<div class="two-column">
<label class="item item-input item-stacked-label">
<span class="input-label"> Width:</span>
<input type="number" ng-model="carOperatingPanel.width" value="{{carOperatingPanel.width}}" placeholder="mm" />
</label>
</div>
<div class="two-column">
<label class="item item-input item-stacked-label">
<span class="input-label"> Height:</span>
<input type="number" ng-model="carOperatingPanel.height" value="{{carOperatingPanel.height}}" placeholder="mm" />
</label>
</div>
</div>
<ul class="draggable-objects">
<li ng-repeat="obj in draggableObjects">
<div ng-drag="true" ng-drag-data="obj" data-allow-transform="true"> {{obj.name}} </div>
</li>
</ul>
<div masonry check-last ng-drop="true" ng-drop-success="onDropComplete1($data,$event)">
<div class="masonry-brick" ng-repeat="obj in droppedObjects1"
flexible-dimensions
ng-drag="true"
ng-drag-data="obj"
ng-drag-success="onDragSuccess1($data,$event)"
>
{{obj.name}}
</div>
</div>
angular.module('starter', ['ngDraggable','wu.masonry'])
.controller('CarOperatingPanelCtrl', function ($scope ) {
$scope.carOperatingPanel = {};
$scope.carOperatingPanel.width = 100;
$scope.carOperatingPanel.height = 200;
$scope.draggableObjects = [{ name: '1', width: 20, height: 20 },
{ name: '2', width: 20, height: 20 },
{ name: '3', width: 20, height: 20 },
{ name: '4', width: 20, height: 20 },
{ name: '5', width: 20, height: 20 },
{ name: '6', width: 20, height: 40 },
{ name: '7', width: 40, height: 20 },
//{ name: '8', width: 80, height: 40 }
];
$scope.droppedObjects1 = [{ name: '8', width: 80, height: 40 }];
$scope.onDropComplete1 = function (data, evt) {
var index = $scope.droppedObjects1.indexOf(data);
if (index == -1)
$scope.droppedObjects1.push(data);
}
$scope.onDragSuccess1 = function (data, evt) {
//debugger;
//console.log("133", "$scope", "onDragSuccess1", "", evt);
var index = $scope.droppedObjects1.indexOf(data);
if (index > -1) {
$scope.droppedObjects1.splice(index, 1);
}
}
var inArray = function (array, obj) {
var index = array.indexOf(obj);
}
})
.directive('flexibleDimensions', function ($document) {
return function (scope, element, attr) {
element.css({
//0,1cm 1mm
'margin': (((element.parent()[0].offsetWidth * 1) / scope.carOperatingPanel.width) / 2) + 'px',
width: ((element.parent()[0].offsetWidth * scope.obj.width) / scope.carOperatingPanel.width) + 'px',
height: ((element.parent()[0].offsetHeight * scope.obj.height) / scope.carOperatingPanel.height) + 'px'
});
};
});
Im using to a ngDraggable to push the elements to the drop area and re-organize them. For better understanding by default i put already the biggest div already selected.
If anyone see something that shouldn't be there tell me.
Thanks
As described here, Angular JS Masonry Directive uses the size of the first element to compute the default column width unless the column-width attribute is present. I don't know what exactly You want to achieve, but You might want to try to set that attribute to make the column width constant.
Related
I can't seem to get this block of code to work. Any suggestions on how I can get it to work? It works if it's only an array, but when I make objects inside it doesn't show anything.
So could the problem be that the code dosent reach the objects?
So could the problem be that the code dosent reach the objects?
Error message
const playersArray = [{
name: 'Darwin Núñez',
number: 27,
age: 23,
position: 'Forward',
image: 'nunez.png'
},
{
name: 'Mohamed Salah',
number: 11,
age: 30,
position: 'Midfielder',
image: 'salah.png'
},
{
name: 'Diogo Jota',
number: 20,
age: 25,
position: 'Forward',
image: 'jota.png'
},
];
function updateResult(query) {
let resultList = document.querySelector(".result");
resultList.innerHTML = "";
playersArray.map(function(player) {
query.split(" ").map(function(word) {
if (player.toLowerCase().indexOf(word.toLowerCase()) != -1) {
resultList.innerHTML += `<p class="list-group-item">${player}</p>`;
}
})
})
}
updateResult("")
<div class="container">
<div class="col-xs-8 col-xs-offset-2 search-box">
<div class="input-group">
<input oninput="updateResult(this.value)" type="search" class="form-control" placeholder="Search..." />
</div>
</div>
<div class="container">
<div class="list-group result"></div>
</div>
</div>
So, first we lowercase the query.
Then, we filter the array of players by checking each property.
Finally, we iterate the results and add them to the p element.
Have a nice day :)
const playersArray = [{
name: 'Darwin Núñez',
number: 27,
age: 23,
position: 'Forward',
image: 'nunez.png'
},
{
name: 'Mohamed Salah',
number: 11,
age: 30,
position: 'Midfielder',
image: 'salah.png'
},
{
name: 'Diogo Jota',
number: 20,
age: 25,
position: 'Forward',
image: 'jota.png'
},
];
let resultList = document.querySelector(".result");
function updateResult(query) {
if (query.length == 0) {
resultList.innerHTML = "";
return;
}
query = query.toLowerCase();
let player = playersArray.filter(el =>
el.name.toLowerCase().indexOf(query) != -1
|| el.number.toString().indexOf(query) != -1
|| el.age.toString().indexOf(query) != -1
|| el.position.toLowerCase().indexOf(query) != -1
|| el.image.toLowerCase().indexOf(query) != -1
);
resultList.innerHTML = "";
player.forEach((data, index) => {
resultList.innerHTML += `
<div class="list-group-item" style="border: 1px solid black; margin-top: 2px;">
<div>Name: ${data.name}<div>
<div>Id: ${data.number}<div>
<div>Age: ${data.age}<div>
<div>Position: ${data.position}<div>
<div>Image: ${data.image}<div>
</div>`;
})
}
updateResult("")
<div class="container">
<div class="col-xs-8 col-xs-offset-2 search-box">
<div class="input-group">
<input oninput="updateResult(this.value)" type="search" class="form-control" placeholder="Search..." />
</div>
</div>
<div class="container">
<div class="list-group result"></div>
</div>
</div>
As the title says I have a bubble chart made with chartjs. The problem is the size of bubbles that do not change depending of the screen size, they are not responsive. I multiple the radius with 5 but I do not want this as it is not responsive. Is there a way to achive that in chartjs? I read on the documentation that the bubble sizes are in pixes. Any way to transform it in dynamic value, like percentage for example?
<div id="<%= containerId %>" class="item">
<script>
async function createChart() {
response = await axios.get(`<%= url %>`);
if(Object.keys(response["data"]["data"]).length) {
container = document.getElementById(`<%= containerId %>`)
container.innerHTML = ` <div class="container">
<div class="section">
<div class="py-4">
<img src="/images/logo.png" width="180" alt="">
</div>
<h2 class="fw-700" id="<%= mainTitleId %>" style="text-transform: capitalize"></h2>
<hr>
<br><br>
<div style="width: 100%;">
<canvas id="<%= chartId %>" style="display: block; width: 1379px; height: 686px;" width="1379" height="689"></canvas>
</div>
</div>
</div>
`
mainTitleElement = document.getElementById(`<%= mainTitleId %>`)
mainTitleElement.innerHTML = response["data"]["data"]["slide_title"]
var phases = [
"Phase 1",
"Phase 2",
"Phase 3",
"Phase 4",
];
var sponsors = response["data"]["data"]["sponsors"];
var dataPoints = response["data"]["data"]["phases_per_sponsors"]
var myBubbleChart = new Chart(document.getElementById(`<%= chartId %>`), {
type: 'bubble',
plugins: [{
afterDatasetUpdate: chart => {
chart.getDatasetMeta(0).data.forEach(v => {
v._model.radius = v._model.radius * 5
v._options.hoverRadius = v._model.radius;
})
}
}],
data: {
datasets: [
{
label: "",
data: dataPoints,
backgroundColor: 'rgba(237, 130, 60, 0.5)',
}
]
},
options: {
legend: {
display: false
},
responsive: true,
scales: {
yAxes: [{
ticks: {
stepSize: 1,
callback: function (value, index, values) {
if (index < sponsors.length) {
return sponsors[sponsors.length - (1 + index)]; //this is to reverse the ordering
}
}
},
position: 'left'
}],
xAxes: [{
ticks: {
stepSize: 1,
callback: function (value, index, values) {
if (index < phases.length) {
return phases[index];
}
}
},
position: 'bottom'
}]
}
}
});
} else {
container = document.getElementById(`<%= containerId %>`)
container.innerHTML = `
<div class="container">
<div class="py-4">
<img src="/images/logo.png" width="180" alt="">
</div>
</div>
<div class="container center">
<div class="section pt-4 px-20">
<h1 class="fw-800 text-center">
${response["data"]["message"]}
</h1>
<hr class="hr-mid">
</div>
</div>
`
};
}
createChart();
</script>
</div>
I have some rectangular shapes (they will appear when the data science toolkit buttons is clicked) and they can drag&drop to the free-space (paper). Also you can run and check easily in codepen.io.
Thing that I want to add, is remove dropped shapes by clicking close button. But I don't know how can create close button near the dropped shape and also removing that shape.
Any help would be greatly appreciated, thanks!
// Canvas where sape are dropped
var graph = new joint.dia.Graph,
paper = new joint.dia.Paper({
el: $('#paper'),
model: graph
});
// Canvas from which you take shapes
var stencilGraph = new joint.dia.Graph,
stencilPaper = new joint.dia.Paper({
el: $('#stencil'),
model: stencilGraph,
interactive: false
});
var r1a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1a'
}
}
});
var r1b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1b'
}
}
});
var r2a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2a'
}
}
});
var r2b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2b'
}
}
});
var r3a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect3a'
}
}
});
var r3b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect3b'
}
}
});
var r4a = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect4a'
}
}
});
var r4b = new joint.shapes.basic.Rect({
position: {
x: 29,
y: 60
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect4b'
}
}
});
var statistic = document.getElementById("statistic-button");
var clustering = document.getElementById("clustering-button");
var classification = document.getElementById("classification-button");
var regression = document.getElementById("regression-button");
statistic.onclick = function(){
r1a.addTo(stencilGraph);
r1b.addTo(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
clustering.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.addTo(stencilGraph);
r2b.addTo(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
classification.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.addTo(stencilGraph);
r3b.addTo(stencilGraph);
r4a.remove(stencilGraph);
r4b.remove(stencilGraph);
};
regression.onclick = function(){
r1a.remove(stencilGraph);
r1b.remove(stencilGraph);
r2a.remove(stencilGraph);
r2b.remove(stencilGraph);
r3a.remove(stencilGraph);
r3b.remove(stencilGraph);
r4a.addTo(stencilGraph);
r4b.addTo(stencilGraph);
};
stencilPaper.on('cell:pointerdown', function(cellView, e, x, y) {
$('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
var flyGraph = new joint.dia.Graph,
flyPaper = new joint.dia.Paper({
el: $('#flyPaper'),
model: flyGraph,
interactive: false
}),
flyShape = cellView.model.clone(),
pos = cellView.model.position(),
offset = {
x: x - pos.x,
y: y - pos.y
};
flyShape.position(0, 0);
flyGraph.addCell(flyShape);
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
$('body').on('mousemove.fly', function(e) {
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
});
$('body').on('mouseup.fly', function(e) {
var x = e.pageX,
y = e.pageY,
target = paper.$el.offset();
// Dropped over paper ?
if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
var s = flyShape.clone();
s.position(x - target.left - offset.x, y - target.top - offset.y);
graph.addCell(s);
}
$('body').off('mousemove.fly').off('mouseup.fly');
flyShape.remove();
$('#flyPaper').remove();
});
});
.data-science-toolkit{
height: 300px;
border: 5px double #005580;
}
.data-science-toolkit .before-drop-display-none{
display: none;
}
.ds-tool-space{
border: 5px double #005580;
}
.free-space{
border: 5px solid #005580;
height: auto;
}
.doitcenter{
text-align: center;
}
#paper {
height: auto;
background-color: #f2e6e6;
}
#stencil {
background-color: darkcyan;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row mt-4">
<div class="col-2">
<div class="data-science-toolkit mb-2">
<div class="nav-logo">
<h5 class="doitcenter" style="text-shadow: 0.5px 0.5px 1px gray;">Toolkit</h5>
</div>
<hr>
<div class="dropdown doitcenter mb-1">
<button id="statistic-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Statistics
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="clustering-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Clustering
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="classification-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Classification
<span class="caret"></span></button>
</div>
<div class="dropdown doitcenter mb-1">
<button id="regression-button" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" style="min-width: 136px;">Regression
<span class="caret"></span></button>
</div>
</div>
<div class="ds-tool-space mb-2">
<div id="stencil" style="height: 250px;"></div>
</div>
</div>
<div class="col-10">
<div class="free-space">
<div id="paper" style=""></div>
</div>
</div>
</div>
</div>
You can use the built-in elementTools.remove, and bind with an event like the following:
paper.on('element:mouseenter', (elementView) => {
elementView.addTools(
new joint.dia.ToolsView({
tools: [
new joint.elementTools.Remove({
useModelGeometry: true,
y: '0%',
x: '100%',
}),
],
})
);
});
paper.on('element:mouseleave', (elementView) => {
elementView.removeTools();
});
Note that you might need to change the position according to your element shape.
This is also included in the official demo
Sorry, this is my first stackoverflow question so let me know if I've formatted this wrong.
I attempted to use document.getElementById("id").value in order to get the input value from the input box but I couldn't quite figure out how to make it work. I saw other answers making use of JSON or JQuery but I don't have much experience in those yet so if I could make this work without those(if possible) I'll take that option.
Any bits of code that are commented out are just me trying to get it to work.
(Sidenote: I know my HTML code might be a bit scuffed, that isn't a priority right now)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pricer.ie</title>
<link rel="stylesheet" href="homepage.css"/>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="/js/themes/gray.js"></script>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</head>
<body>
<nav class="navbar">
<ul>
<li class="logo">
<img src="logopricer.png" alt="logo" id="logo" >
</li>
<li>
Login
</li>
</ul>
</nav>
<main>
<figure class="highcharts-figure">
<div id="container" style="width:100%; height:400px;"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var myChart = Highcharts.chart({
chart: {
renderTo: 'container',
type: 'pie',
events: {
load: function(event) {
var chart = this,
points = chart.series[0].points,
len = points.length,
total = 0,
i = 0;
for (; i < len; i++) {
total += points[i].y;
}
chart.setTitle({
text: '<span style="font-size: 13px">Current Price</small><br>' + '<b>' + '€' + total.toFixed(2) + '</b>',
align: 'center',
verticalAlign: 'middle',
y: -10,
});
}
}
},
title: {
text: 'Product Details'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}</b>' + '<b>%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: €{point.y:.2f}'
}
}
},
series: [{
name: 'Total', [{
name: 'Profit Margin',
// y: document.getElementById('pcost').value
y : 0.29
}, {
name: 'Taxes',
// y: document.getElementById('taxes').value // external thing! database cuz tax changes depending on product
y : 4.25
}, {
name: 'Ebay Fees',
// y: document.getElementById('listfee').value
y : 3.93
}, {
name: 'Unit + Shipping Costs',
// y : document.getElementById('icost').value + document.getElementById('scost').value
y : 17.03
}],
size: '60%',
innerSize: '70%',
showInLegend:true,
dataLabels: {
enabled: true
}
}]
},
)
}
)
</script>
</figure>
<article>
<form>
<label for="icost">Item Cost:</label>
<input type="number" id="icost" name="icost" step="0.01"><br><br>
<label for="scost">Shipping Cost:</label>
<input type="number" id="scost" name="scost" step="0.01"><br><br> <!-- names and ids are incorrect just like this for now -->
<label for="pcost">Pickpack Cost:</label>
<input type="number" id="pcost" name="scost" step="0.01"><br><br>
<label for="taxes">Taxes:</label>
<input type="number" id="taxes" name="taxes" step="0.01"><br><br> <!-- shouldnt exist as taxes is from database but sure look-->
<label for="listfee">Listing Fee:</label>
<input type="number" id="listfee" name="listfee"><br><br>
<button onclick="Function()">Save Changes</button>
</form>
</article>
</main>
<footer>
</footer>
</body>
<html>
I would link to a JSFiddle but not sure how I would do that as my JS is currently embedded within my HTML lol. Thanks in advance to anyone that decides to give me a hand with this. Any advice with this is useful!
You need to get data and put them in a format required by Highcharts. Simple example below:
document.getElementById('btn').addEventListener('click', function() {
var data = [
parseInt(document.getElementById('data1').value),
parseInt(document.getElementById('data2').value)
];
Highcharts.chart('container', {
series: [{
type: 'pie',
data
}]
});
});
Live demo: http://jsfiddle.net/BlackLabel/dyp5208b/
API Reference: https://api.highcharts.com/highcharts/series.pie.data
I want to start my time in minutes from 9 AM to 9 PM
To answer the question in your title:
You can create a Date and use setHours, setMinutes, etc. to set its time to 9.00 in the morning.
You can then use - to find the difference in milliseconds between two dates. By dividing by 1000 * 60, you can calculate the difference in minutes.
const minutesSinceNineInTheMorning = (dateTime) => {
const nineInTheMorning = new Date(dateTime);
nineInTheMorning.setHours(9);
nineInTheMorning.setMinutes(0);
nineInTheMorning.setSeconds(0);
nineInTheMorning.setMilliseconds(0);
const msInAMinute = 1000 * 60;
return (dateTime - nineInTheMorning) / msInAMinute;
};
console.log(minutesSinceNineInTheMorning(new Date()));
The remaining questions are a matter of finding overlap between blocks, which should be doable now that you have regular numbers to work with.
If you still need help with the last problems, it's probably best to ask a new question or show some tries specific to the required logic.
P.S. Here's a quick example I wrote during my lunch break that might help you get started:
const requestByJohn = { start: 220, end: 280, name: "John" };
const options = [
{start: 225, end: 285, name: "Jane" },
{start: 210, end: 270, name: "Aisha"},
{start: 180, end: 240, name: "Brad" },
{start: 180, end: 330, name: "Alice"},
{start: 300, end: 360, name: "Yusef"},
{start: 270, end: 330, name: "Rob" }
];
const match = req => opt => ({
// Calculate the overlap between two blocks
overlap: opt.end <= req.start || opt.start > req.end
? 0
: Math.min(req.end, opt.end) - Math.max(req.start, opt.start),
// The earliest start time of this meeting
start: Math.max(req.start, opt.start),
label: `${req.name} - ${opt.name}`
});
const overlapRule = ({ overlap }) => overlap >= 30;
const sortLogic = (m1, m2) =>
// Sort by overlap first
m2.overlap > m1.overlap ? 1 :
m2.overlap < m1.overlap ? -1 :
// Sort by start second
m2.start > m1.start ? -1 :
m2.start < m1.start ? 1 :
0 ;
// Chain match, filter, sort:
const bestMatches = options
.map(match(requestByJohn))
.filter(overlapRule)
.sort(sortLogic);
console.log(
"Best match:",
bestMatches[0],
"\nAll possibilities:",
bestMatches
)
.as-console-wrapper { min-height: 100%; }
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Brilliant Lunch</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
</head>
<body>
<div class="flex-container">
<div class="time">
<span class="span-large">09:00 AM</span>
<span class="span-small">9:30 AM</span>
<span class="span-large">10:00 AM</span>
<span class="span-small">10:30 AM</span>
<span class="span-large">11:00 AM</span>
<span class="span-small">11:30 AM</span>
<span class="span-large">12:00 AM</span>
<span class="span-small">12:30 AM</span>
<span class="span-large">01:00 AM</span>
<span class="span-small">01:30 AM</span>
<span class="span-large">02:00 AM</span>
<span class="span-small">02:30 AM</span>
<span class="span-large">03:00 AM</span>
<span class="span-small">03:30 AM</span>
<span class="span-large">04:00 AM</span>
<span class="span-small">04:30 AM</span>
<span class="span-large">05:00 AM</span>
<span class="span-small">05:30 AM</span>
<span class="span-large">06:00 AM</span>
<span class="span-small">06:30 AM</span>
<span class="span-large">07:00 AM</span>
<span class="span-small">07:30 AM</span>
<span class="span-large">08:00 AM</span>
<span class="span-small">08:30 AM</span>
<span class="span-large">09:00 AM</span>
</div>
<div class="container" id="main_Content">
<div class="row"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
style
.flex-container {
display: flex;
margin-top: 30px;
}
.container {
display: flex;
width: 610px;
height: 720px;
padding-left: 10px;
padding-right: 10px;
background: #ECECEC;
}
.row {
width: 100%;
height: auto;
}
.time {
height: 720px;
width: 100px;
}
.span-large {
display: inline-block;
margin-left: 38%;
font-size: 0.8rem;
margin-bottom: 12px;
font-weight: 600;
color: #666;
}
.span-small {
display: inline-block;
font-size: 10px;
margin-left: 50.1%;
margin-bottom: 12px;
color: #666;
}
main.js
"use strict"
const requestByJohn = { start: 220, end: 280, name: "John" };
const options = [
{start: 225, end: 285, name: "Jane" },
{start: 210, end: 270, name: "Aisha"},
{start: 180, end: 240, name: "Brad" },
{start: 180, end: 330, name: "Alice"},
{start: 300, end: 360, name: "Yusef"},
{start: 270, end: 330, name: "Rob" }
];
const match = req => opt => ({
// Calculate the overlap between two blocks
overlap: opt.end <= req.start || opt.start > req.end
? 0
: Math.min(req.end, opt.end) - Math.max(req.start, opt.start),
// The earliest start time of this meeting
start: Math.max(req.start, opt.start),
label: `${req.name} - ${opt.name}`
});
const overlapRule = ({ overlap }) => overlap >= 30;
const sortLogic = (m1, m2) =>
// Sort by overlap first
m2.overlap > m1.overlap ? 1 :
m2.overlap < m1.overlap ? -1 :
// Sort by start second
m2.start > m1.start ? -1 :
m2.start < m1.start ? 1 :
0 ;
// Chain match, filter, sort:
const matchLunchEvent = options
.map(match(requestByJohn))
.filter(overlapRule)
.sort(sortLogic);
console.log(
"Brilliant Lunch:",
matchLunchEvent[0],
"\nAll possibilities:",
matchLunchEvent
)