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>
<p>
Please keep in mind the data source for this service enforces a daily request limit, 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 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. card numbers are valid, try again in a few hours or use the raw result URLs.
</p> </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>