Skip to content

Instantly share code, notes, and snippets.

@LemoNode

LemoNode/index.html

Last active March 4, 2020 21:50
Show Gist options
  • Save LemoNode/35a89cd0757058ddbdd06287b7c96342 to your computer and use it in GitHub Desktop.
Save LemoNode/35a89cd0757058ddbdd06287b7c96342 to your computer and use it in GitHub Desktop.
Download ZIP
fart knockers 2
Raw
index.html
<head>
<title>Lista</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
:root {
--width: 1005px;
--top: 35px;
}
body {
margin: auto;
width: var(--width);
font: 14px arial;
text-rendering: optimizeSpeed;
padding-top: 25px;
}
table {
margin-top: var(--top);
border-spacing: 0;
font: 11px arial;
width: var(--width);
padding-bottom: 35px;
}
th {
position: sticky;
top: calc(var(--top) + 15px);
background-color: #f1f1f1;
}
th, td {
text-rendering: optimizeSpeed;
text-align: left;
border-bottom: 1px solid #ccc;
padding: 3px 5px 3px 5px;
}
input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 5px 3px 5px;
margin-right: 5px;
}
button {
border-radius: 3px;
outline: none;
padding: 2px 5px 2px 5px;
}
#VGRID {
width: 75px;
outline: none;
}
#chart {
position: relative;
left: -13px;
}
</style>
</head>
<body onload="main();">
<h2 style="font-weight: lighter;">Sommar önskelista 2020! 🌞</h2>
<p>Skriv ditt <input type="text" id="VGRID" placeholder="VGRID"><button id="load">Ladda kalender</button></p>
<div id="chart"></div>
<div id="save-div"></div>
<script>
var allDates = [];
var socket = new WebSocket("ws://" + document.location.host + "/echo");
socket.onopen = function(evt) {
console.log("OPEN");
}
socket.onmessage = function(evt) {
var arr = evt.data.split(",");
allDates = allDates.concat(arr);
load_chart(arr);
}
// d3 shit
var day = d3.timeFormat("%w"),
week = d3.timeFormat("%U"),
months = d3.timeFormat("%m"),
years = d3.timeFormat("%Y");
var formatYear = d3.timeFormat("%Y-%m-%d")
var width = 1005,
height = 200,
cellSize = 15;
var tight = 4.5 ;
var rowMonth = Math.floor(width / (cellSize * tight));
var shift = 1;
var svg = d3.select("#chart").selectAll(".svg")
.data([""])
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "svg")
.append("g");
var year = new Date().getFullYear();
var getDays = function() {
return d3.timeDays(
new Date(year, 0, 1), new Date(year + 1, 0, 1)
);
}
var initCell = 1.2 * cellSize * tight;
var row_shift = 8.5;
function check_weekend(d) {
var check = (d.getDay() == 0 || d.getDay() == 6)
if (check) {
return true;
} else {
return false;
}
}
function load_chart(server_data) {
var rect = svg.selectAll(".days")
.data(getDays)
rect.exit().remove()
rect.enter().append("rect")
.attr("class", "days")
.attr("width", cellSize)
.attr("height", cellSize)
.merge(rect)
.attr("pointer-events", function(d) {
if (check_weekend(d)) return "none"
else return;
})
.attr("x", function(d) {
if (check_weekend(d)) {
return null;
} else {
var month = initCell * ((months(d)-1) % (rowMonth));
console.log(month)
return day(d) * cellSize + month;
}
})
.attr("y", function(d) {
if (check_weekend(d)) {
return null;
} else {
var weekDiff = week(d) - week(new Date(years(d), months(d)-1, 1));
var rows = 0.8
return (weekDiff*cellSize) + rows*cellSize*row_shift - cellSize/2 ;
}
})
.attr("fill", function(d) {
if (check_weekend(d)) {
return "#fff";
} else if (server_data.includes(formatYear(d))) {
return "#ff8a82";
} else {
return "#fff";
}
})
.attr("stroke", function(d) {
if (check_weekend(d)) {
return "#fff";
}
return "#ddd";
})
.datum(d3.timeFormat("%Y-%m-%d"))
.property("value", function(d) {
return d;
})
var dayText = svg.selectAll(".dayText")
.data(getDays)
dayText.exit().remove()
dayText.enter().append("text")
.attr("class", "dayText")
.attr("pointer-events","none")
.attr("font-size", 11)
.attr("dx", 1)
.attr("dy", 11)
.merge(dayText)
.attr("x", function(d) {
if (check_weekend(d)) {
return null;
} else {
var month = initCell * ((months(d)-1) % (rowMonth));
return day(d) * cellSize + month;
}
})
.attr("y", function(d) {
if (check_weekend(d)) {
return null;
} else {
var weekDiff = week(d) - week(new Date(years(d), months(d)-1, 1));
var rows = 0.8
return (weekDiff*cellSize) + rows*cellSize*row_shift - cellSize/2 ;
}
})
.attr("fill", function(d) {
if (check_weekend(d)) {
return "transparent";
} else {
return "#444";
}
})
.datum(d3.timeFormat("%d"))
.text(d => d);
var monthText = svg.selectAll(".monthText")
.data(function() {
return d3.timeMonths(
new Date(year, 0, 1), new Date(year + 1, 0, 1)
);
})
monthText.exit().remove()
monthText.enter().append("text")
.attr("class", "monthText")
.style("font-weight", "bold")
.attr("font-size", 13)
.attr("fill", (d, i) => i % 2 == 0 ? "#666" : "steelblue")
.merge(monthText)
.attr("x", d => initCell * ((months(d)-1) % (rowMonth)))
.attr("y", function(d) {
var weekDiff = week(d) - week(new Date(years(d), months(d)-1, 1) );
var rows = 0.8
return (weekDiff*cellSize) + rows*cellSize*row_shift - cellSize ;
})
.attr("dx", cellSize * 7 / 2)
.attr("dy", - 18)
.attr("text-anchor", "middle")
.attr("d", monthTitle)
.text(monthTitle);
var weekText = svg.selectAll(".weekText")
.data(function() {
return d3.timeMonths(
new Date(year, 0, 1), new Date(year + 1, 0, 1)
);
})
weekText.exit().remove()
weekText.enter().append("text")
.attr("class", "weekText")
.style("font-weight", "bold")
.attr("font-size", 10.5)
.attr("fill", "#333")
.merge(weekText)
.attr("x", d => initCell * ((months(d)-1) % (rowMonth)))
.attr("y", function(d) {
var weekDiff = week(d) - week(new Date(years(d), months(d)-1, 1) );
var rows = 0.8
return (weekDiff*cellSize) + rows*cellSize*row_shift - cellSize ;
})
.attr("dx", 15)
.attr("dy", 0)
.attr("text-anchor", "start")
.text("Må Ti On To Fr");
d3.selectAll(".days").on("click", function() {
if (allDates.includes(this.value)) {
const index = allDates.indexOf(this.value);
allDates.splice(index, 1);
d3.select(this).attr("fill", "#fff");
} else {
d3.select(this).attr("fill", "#ff8a82");
allDates.push(this.value);
}
console.log(allDates);
})
document.querySelector("#save-div").innerHTML = `<button id="save">Spara</button>`;
d3.select("#save").on("click", function() {
var vgrid = document.querySelector("#VGRID").value;
var string = allDates.join();
var result = vgrid + "||" + string;
socket.send(result);
console.log(result);
})
}
d3.select("#load").on("click", function() {
var vgrid = document.querySelector("#VGRID").value;
if (!vgrid) {
alert("Måste fylla i vgrid");
} else {
var result = "vgrid: " + vgrid;
socket.send(result);
}
})
function monthTitle (t0) {
var local = t0.toLocaleString("sv-SE", { month: "long" })
return local.charAt(0).toUpperCase() + local.slice(1).toLowerCase();
}
main = () => {
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment