Implemented linecounter for cards-input, changed output formatting around a bit, moar text
This commit is contained in:
parent
606aaa1f03
commit
e575bb3a72
1 changed files with 52 additions and 13 deletions
65
index.php
65
index.php
|
|
@ -58,6 +58,10 @@
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label small {
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
textarea#query {
|
textarea#query {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
@ -72,12 +76,34 @@
|
||||||
border-color: hsl(224, 78%, 75%);
|
border-color: hsl(224, 78%, 75%);
|
||||||
background-color: hsl(224, 78%, 90%);
|
background-color: hsl(224, 78%, 90%);
|
||||||
}
|
}
|
||||||
|
button[type=submit]:disabled {
|
||||||
|
border-color: hsl(224, 20%, 90%);
|
||||||
|
background-color: hsl(224, 20%, 75%);
|
||||||
|
}
|
||||||
|
|
||||||
:required:invalid, :focus:invalid {
|
:required:invalid, :focus:invalid {
|
||||||
/* insert your own styles for invalid form input */
|
/* insert your own styles for invalid form input */
|
||||||
background-color: #ffeeee;
|
background-color: #ffeeee;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function updateLineCounter() {
|
||||||
|
var linecounter = document.getElementById("linecounter");
|
||||||
|
var submit = document.getElementById("submit");
|
||||||
|
var queryfield = document.getElementById("query");
|
||||||
|
|
||||||
|
var count = query.value.split(/\r|\r\n|\n/).length;
|
||||||
|
linecounter.textContent = count+"/100";
|
||||||
|
|
||||||
|
if (count > 100) {
|
||||||
|
linecounter.setAttribute("style", "color: red;");
|
||||||
|
submit.setAttribute("disabled", "disabled");
|
||||||
|
} else {
|
||||||
|
linecounter.removeAttribute("style");
|
||||||
|
submit.removeAttribute("disabled");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>MtG Card Data Collector</h1>
|
<h1>MtG Card Data Collector</h1>
|
||||||
|
|
@ -118,12 +144,15 @@ function x() {
|
||||||
}
|
}
|
||||||
|
|
||||||
switch ($_REQUEST['format']) {
|
switch ($_REQUEST['format']) {
|
||||||
case "set:num":
|
case "cardname":
|
||||||
|
$template = "{name}";
|
||||||
|
break;
|
||||||
|
case "set:number":
|
||||||
$template = "{set}: {number}";
|
$template = "{set}: {number}";
|
||||||
break;
|
break;
|
||||||
case "cardname":
|
case "setname:cardname":
|
||||||
default:
|
default:
|
||||||
$template = "{name}";
|
$template = "{setName}: {name}";
|
||||||
}
|
}
|
||||||
|
|
||||||
$lines = explode("\n", $q);
|
$lines = explode("\n", $q);
|
||||||
|
|
@ -139,6 +168,9 @@ function x() {
|
||||||
$urls_only = false;
|
$urls_only = false;
|
||||||
foreach ($lines as $i => $line) {
|
foreach ($lines as $i => $line) {
|
||||||
$parts = explode(' ', trim($line));
|
$parts = explode(' ', trim($line));
|
||||||
|
if (count($parts) !== 2)
|
||||||
|
continue;
|
||||||
|
|
||||||
$url = "https://api.magicthegathering.io/v1/cards?set=$parts[0]&number=$parts[1]";
|
$url = "https://api.magicthegathering.io/v1/cards?set=$parts[0]&number=$parts[1]";
|
||||||
|
|
||||||
if (!$urls_only) {
|
if (!$urls_only) {
|
||||||
|
|
@ -182,7 +214,8 @@ x()
|
||||||
<?php
|
<?php
|
||||||
foreach ([
|
foreach ([
|
||||||
"Card name" => "cardname",
|
"Card name" => "cardname",
|
||||||
"Set: Number" => "set:num",
|
"Set name: Card name" => "setname:cardname",
|
||||||
|
"Set: Number" => "set:number",
|
||||||
] as $label => $value) {
|
] as $label => $value) {
|
||||||
$selected = $_REQUEST["format"] === $value ? " selected" : "";
|
$selected = $_REQUEST["format"] === $value ? " selected" : "";
|
||||||
echo "<option value=\"$value\" $selected>$label</option>";
|
echo "<option value=\"$value\" $selected>$label</option>";
|
||||||
|
|
@ -196,24 +229,30 @@ foreach ([
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<label for="query">Cards:</label>
|
<label for="query">Cards:<br><small id=linecounter>0/100</small></label>
|
||||||
<textarea id="query" name="query" rows="20" <?= !isset($_REQUEST['query']) ? "autofocus" : "" ?> required placeholder="M12 7
|
<textarea id="query" name="query" rows="20" onkeyup="updateLineCounter()" <?= !isset($_REQUEST['query']) ? "autofocus" : "" ?> required placeholder="M12 7
|
||||||
ORI 25
|
ORI 25
|
||||||
AER 178"><?= !empty($_REQUEST['query']) ? $_REQUEST['query'] : "" ?></textarea>
|
AER 178"><?= !empty($_REQUEST['query']) ? $_REQUEST['query'] : "" ?></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div></div>
|
<div></div>
|
||||||
<p style="padding: 1em 0;">
|
<div>
|
||||||
Please keep in mind the data source for this service enforces a daily request limit,
|
<p>
|
||||||
so please don't waste it. If no cards are found and you are sure your set codes and
|
Please keep in mind the data source for this service enforces a daily request limit,
|
||||||
card numbers are valid, try again in a few hours or use the raw result URLs.
|
so please don't waste it. If no cards are found and you are sure your set codes and
|
||||||
</p>
|
card numbers are valid, try again in a few hours or use the raw result URLs.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Depending on how many cards you entered, loading the data will take a while.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span></span>
|
<span></span>
|
||||||
<button type="submit">Submit</button>
|
<button id=submit type="submit">Submit</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
<script type="text/javascript">updateLineCounter()</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue