Implemented linecounter for cards-input, changed output formatting around a bit, moar text

This commit is contained in:
fanir 2017-05-12 22:48:57 +02:00
parent 606aaa1f03
commit e575bb3a72

View file

@ -58,6 +58,10 @@
margin-right: 0.5em;
}
label small {
font-size: 0.75em;
font-weight: normal;
}
textarea#query {
font-family: monospace;
}
@ -72,12 +76,34 @@
border-color: hsl(224, 78%, 75%);
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 {
/* insert your own styles for invalid form input */
background-color: #ffeeee;
}
</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>
<body>
<h1>MtG Card Data Collector</h1>
@ -118,12 +144,15 @@ function x() {
}
switch ($_REQUEST['format']) {
case "set:num":
case "cardname":
$template = "{name}";
break;
case "set:number":
$template = "{set}: {number}";
break;
case "cardname":
case "setname:cardname":
default:
$template = "{name}";
$template = "{setName}: {name}";
}
$lines = explode("\n", $q);
@ -139,6 +168,9 @@ function x() {
$urls_only = false;
foreach ($lines as $i => $line) {
$parts = explode(' ', trim($line));
if (count($parts) !== 2)
continue;
$url = "https://api.magicthegathering.io/v1/cards?set=$parts[0]&number=$parts[1]";
if (!$urls_only) {
@ -182,7 +214,8 @@ x()
<?php
foreach ([
"Card name" => "cardname",
"Set: Number" => "set:num",
"Set name: Card name" => "setname:cardname",
"Set: Number" => "set:number",
] as $label => $value) {
$selected = $_REQUEST["format"] === $value ? " selected" : "";
echo "<option value=\"$value\" $selected>$label</option>";
@ -196,24 +229,30 @@ foreach ([
</div>
</div>
<div class="row">
<label for="query">Cards:</label>
<textarea id="query" name="query" rows="20" <?= !isset($_REQUEST['query']) ? "autofocus" : "" ?> required placeholder="M12 7
<label for="query">Cards:<br><small id=linecounter>0/100</small></label>
<textarea id="query" name="query" rows="20" onkeyup="updateLineCounter()" <?= !isset($_REQUEST['query']) ? "autofocus" : "" ?> required placeholder="M12 7
ORI 25
AER 178"><?= !empty($_REQUEST['query']) ? $_REQUEST['query'] : "" ?></textarea>
</div>
<div class="row">
<div></div>
<p style="padding: 1em 0;">
Please keep in mind the data source for this service enforces a daily request limit,
so please don't waste it. If no cards are found and you are sure your set codes and
card numbers are valid, try again in a few hours or use the raw result URLs.
</p>
<div></div>
<div>
<p>
Please keep in mind the data source for this service enforces a daily request limit,
so please don't waste it. If no cards are found and you are sure your set codes and
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 class="row">
<span></span>
<button type="submit">Submit</button>
<button id=submit type="submit">Submit</button>
</div>
</div>
</form>
<script type="text/javascript">updateLineCounter()</script>
</body>
</html>