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
55
index.php
55
index.php
|
@ -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;">
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue