francois/HowBadIsMyBatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
frankknoll
2022-02-11 22:03:04 +01:00
parent f34b8eb474
commit 61f233377b
3 changed files with 96 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
batchCodeTable.html
View File

@@ -7,28 +7,36 @@
<title>batch codes</title> <title>batch codes</title>
<!-- FK-TODO: keine externen Links --> <!-- FK-TODO: keine externen Links -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="forkMeOnGitHub.css">
<!-- FK-TODO: keine externen Links --> <!-- FK-TODO: keine externen Links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- FK-TODO: keine externen Links --> <!-- FK-TODO: keine externen Links -->
<script type="text/javascript" charset="utf8" <script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script> src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script> <script>
function capitalizeFirstLetter(str) { function getSearchParams() {
return str.charAt(0).toUpperCase() + str.slice(1) const searchParams = new URLSearchParams(window.location.search);
return {
company: searchParams.get('company'),
companyName: searchParams.get('companyName'),
title: searchParams.get('title')
};
} }
$(document).ready(function () { function replaceCssClassesWithStrs({ title, companyName }) {
const searchParams = new URLSearchParams(window.location.search); replaceCssClassWithStr(".title", title);
const company = searchParams.get('company'); replaceCssClassWithStr(".companyName", companyName);
const companyName = searchParams.get('companyName'); }
const title = searchParams.get('title');
document.title = title; function replaceCssClassWithStr(cssClass, str) {
document.querySelectorAll(".title").forEach(element => element.textContent = title); document.querySelectorAll(cssClass).forEach(element => element.textContent = str);
document.querySelectorAll(".companyName").forEach(element => element.textContent = companyName); }
$("#table").load("data/" + company + ".html", function () {
function loadBatchCodeTable(file, searchPlaceholder) {
$("#batchCodeTableWrapper").load(file, function () {
$('#batchCodeTable').DataTable({ $('#batchCodeTable').DataTable({
language: { language: {
searchPlaceholder: "Enter " + companyName + " Batch Code" searchPlaceholder: searchPlaceholder
}, },
search: { search: {
return: false return: false
@@ -36,6 +44,13 @@
"order": [[1, "desc"]] "order": [[1, "desc"]]
}); });
}); });
}
$(document).ready(function () {
const { company, companyName, title } = getSearchParams();
document.title = title;
replaceCssClassesWithStrs({ title, companyName });
loadBatchCodeTable("data/" + company + ".html", "Enter " + companyName + " Batch Code");
}); });
</script> </script>
<style> <style>
@@ -50,74 +65,12 @@
</head> </head>
<body> <body>
<!-- adapted from https://codepo8.github.io/css-fork-on-github-ribbon/ --> <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
<style>
#forkongithub a {
background: #000;
color: #fff;
text-decoration: none;
font-family: arial, sans-serif;
text-align: center;
font-weight: bold;
padding: 5px 40px;
font-size: 1rem;
line-height: 2rem;
position: relative;
transition: 0.5s;
}
#forkongithub a:hover {
background: #c11;
color: #fff;
}
#forkongithub a::before,
#forkongithub a::after {
content: "";
width: 100%;
display: block;
position: absolute;
top: 1px;
left: 0;
height: 1px;
background: #fff;
}
#forkongithub a::after {
bottom: 1px;
top: auto;
}
@media screen and (min-width:800px) {
#forkongithub {
position: absolute;
display: block;
top: 0;
right: 0;
width: 200px;
overflow: hidden;
height: 200px;
z-index: 9999;
}
#forkongithub a {
width: 200px;
position: absolute;
top: 60px;
right: -60px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
}
</style><span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
<h1 class="title"></h1> <h1 class="title"></h1>
<p> <p>
<b>Check out your <span class="companyName"></span> batch code </b>&emsp;<font size="-2">(last updated 11th February 2022)</font> <b>Check out your <span class="companyName"></span> batch code </b>&emsp;<font size="-2">(last updated 11th February
<div id="table"></div> 2022)</font>
<div id="batchCodeTableWrapper"></div>
</p> </p>
</body> </body>

63
forkMeOnGitHub.css Normal file
View File

@@ -0,0 +1,63 @@
/* adapted from https: //codepo8.github.io/css-fork-on-github-ribbon/ */
#forkongithub a {
background: #000;
color: #fff;
text-decoration: none;
font-family: arial, sans-serif;
text-align: center;
font-weight: bold;
padding: 5px 40px;
font-size: 1rem;
line-height: 2rem;
position: relative;
transition: 0.5s;
}
#forkongithub a:hover {
background: #c11;
color: #fff;
}
#forkongithub a::before,
#forkongithub a::after {
content: "";
width: 100%;
display: block;
position: absolute;
top: 1px;
left: 0;
height: 1px;
background: #fff;
}
#forkongithub a::after {
bottom: 1px;
top: auto;
}
@media screen and (min-width:800px) {
#forkongithub {
position: absolute;
display: block;
top: 0;
right: 0;
width: 200px;
overflow: hidden;
height: 200px;
z-index: 9999;
}
#forkongithub a {
width: 200px;
position: absolute;
top: 60px;
right: -60px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
}

66
index.html
View File

@@ -5,73 +5,11 @@
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>How Bad is My Batch</title> <title>How Bad is My Batch</title>
<link rel="stylesheet" type="text/css" href="forkMeOnGitHub.css">
</head> </head>
<body> <body>
<!-- adapted from https://codepo8.github.io/css-fork-on-github-ribbon/ --> <span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
<style>
#forkongithub a {
background: #000;
color: #fff;
text-decoration: none;
font-family: arial, sans-serif;
text-align: center;
font-weight: bold;
padding: 5px 40px;
font-size: 1rem;
line-height: 2rem;
position: relative;
transition: 0.5s;
}
#forkongithub a:hover {
background: #c11;
color: #fff;
}
#forkongithub a::before,
#forkongithub a::after {
content: "";
width: 100%;
display: block;
position: absolute;
top: 1px;
left: 0;
height: 1px;
background: #fff;
}
#forkongithub a::after {
bottom: 1px;
top: auto;
}
@media screen and (min-width:800px) {
#forkongithub {
position: absolute;
display: block;
top: 0;
right: 0;
width: 200px;
overflow: hidden;
height: 200px;
z-index: 9999;
}
#forkongithub a {
width: 200px;
position: absolute;
top: 60px;
right: -60px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
}
}
</style><span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
<h1>How Bad is My Batch</h1> <h1>How Bad is My Batch</h1>
<p> <p>
<ul> <ul>