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; 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>