epagris/MKK_KozVezVal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fájlbetöltés kész, stíluslap elkezve

Browse Source
This commit is contained in:
Wiesner András 2022-06-01 16:50:43 +02:00
parent 0203cc0dd6
commit e1823c9aec
6 changed files with 264 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.php Normal file
View File

@ -0,0 +1,24 @@
<?php
?>
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8"/>
<title>MKK Közivezető-választás</title>
<script src="js/req.js"></script>
<script src="js/mkkkvv.js"></script>
<link rel="stylesheet" href="mkkkvv.css"/>
</head>
<body>
<section id="mainbox">
<input oninput="search_in_names(this.value)" type="text" placeholder="Ki legyen a Közivezető? :)" id="nameinput">
<section id="hintzone">
<section id="hintbox">
</section>
</section>
</section>
</body>
</html>

92
interface.php Normal file
View File

@ -0,0 +1,92 @@
<?php
define("DUPLICATE_NAME_IN_SAME_GROUP", true);
// kiolvassa a választható emberek listáját
function read_electable_people(string $fname): array
{
$s = file_get_contents($fname);
// szétszedés csoportnév-csoporttag sorozatra
$group_name_seq = preg_split("/(\*\*)|(__)/", trim($s), -1, PREG_SPLIT_NO_EMPTY);
// csoportok feldolgozása egyenként
$ep = [];
for ($i = 0; $i < count($group_name_seq); $i += 2) {
$group = trim($group_name_seq[$i]); // csoport kiolvasása
$names = preg_split("/(\n)|(\r\n)/", trim($group_name_seq[$i + 1]), -1, PREG_SPLIT_NO_EMPTY); // nevek a csoportból
foreach ($names as $name) {
if (trim($name) === "") { // üres sorokat átugorja
continue;
}
$new_rec = ["name" => $name, "group" => $group];
if (DUPLICATE_NAME_IN_SAME_GROUP || !in_array($new_rec, $ep)) {
$ep[] = $new_rec;
}
}
}
return $ep;
}
define("MINIMUM_NEEDLE_LENGTH", 3);
// keresés a nevek között
function search_in_names(array $records, string $needle): array
{
$needle = trim($needle);
if (strlen($needle) < MINIMUM_NEEDLE_LENGTH) {
return [];
}
$hitpos_array = [];
$filter = function(array $var) use (&$hitpos_array, $needle) : bool {
$hitpos = stripos($var["name"], $needle);
if ($hitpos != false) {
$hitpos_array[] = $hitpos;
}
return $hitpos !== false;
};
$filter_res = array_values(array_filter($records, $filter));
if (count($filter_res) > 0) {
for ($i = 0; $i < count($filter_res); $i++) {
$filter_res[$i]["hitpos"] = $hitpos_array[$i];
}
}
return $filter_res;
}
// --------------------------------
define("ELECTABLE_PEOPLE_DATABASE", "data/electable_people_test.md");
$action = json_decode($_POST["action"]) ?? "none";
$res = "";
switch ($action) {
case "search":
{
$needle = json_decode($_POST["needle"]);
$p = read_electable_people(ELECTABLE_PEOPLE_DATABASE);
$hits = search_in_names($p, $needle);
$res = $hits;
}
break;
case "none":
break;
}
echo json_encode($res);
//$p = read_electable_people("data/electable_people_test.md");
return;

63
js/mkkkvv.js Normal file
View File

@ -0,0 +1,63 @@
const MINIMUM_NEEDLE_LENGTH = 3;
const CANVAS = document.create
// keresés indítása a nevek között
function search_in_names(needle) {
let hintbox = document.getElementById("hintbox");
if (needle.length < 3) {
hintbox.innerHTML = "";
}
if (needle.trim().length < MINIMUM_NEEDLE_LENGTH) {
return;
}
request({
action: "search",
needle: needle
}).then(resp => {
hintbox.innerHTML = "";
let hits = JSON.parse(resp);
console.log(hits);
hits.forEach((key, val) => {
if (needle.length < 3) {
return;
}
let hit = document.createElement("span");
hit.classList.add("hit");
let name_node = document.createElement("span");
name_node.classList.add("name");
let hp = key["hitpos"];
let name = key["name"];
if (hp > 0) {
let name_begin = name.slice(0, hp);
name_node.appendChild(document.createTextNode(name_begin));
}
let hl = document.createElement("span");
hl.classList.add("highlight");
hl.innerText = name.slice(hp, hp + needle.length);
name_node.appendChild(hl);
if (hp + needle.length < name.length) {
let name_end = name.slice(hp + needle.length, name.length);
name_node.appendChild(document.createTextNode(name_end));
}
hit.appendChild(name_node);
let group = document.createElement("span");
group.innerText = `(${key["group"]})`;
group.classList.add("group");
hit.appendChild(group);
hintbox.appendChild(hit);
});
});
}

31
js/req.js Normal file
View File

@ -0,0 +1,31 @@
// kérés indítása a szerver felé (eredeti: KL.)
function request(data, url = "interface.php", method = "POST") {
return new Promise((resolve, reject) => {
var fd;
// ha van adat megadva...
if (data != null) {
fd = new FormData();
// mezők hozzáfűzése a kéréshez
for (let prop in data) {
if (Object.prototype.hasOwnProperty.call(data, prop)) {
fd.append(prop, JSON.stringify(data[prop]));
}
}
}
// kérés feladása
fetch(url, {
method: method,
body: fd,
})
.then(response => response.text())
.then(data => resolve(data))
.catch((error) => {
console.error('Error: ', error);
reject(error);
});
});
}

6
mkkkv_interface.php
View File

@ -1,6 +0,0 @@
<?php
// kiolvassa a választható emberek listáját
function read_electable_people(string $fname) : array {
return [];
}

54
mkkkvv.css Normal file
View File

@ -0,0 +1,54 @@
@import url('https://fonts.googleapis.com/css2?family=Faustina&display=swap');
body{
--C_PRIMARY: #f89a17;
--C_SEC: #44968e;
--C_TER: #2a5999;
--C_TRIADIC1: #85ea11;
--C_TRIADIC2: #11ea76;
--C_BG1: #c0ccdf;
--C_BG2: #e3ecf3;
font-family: 'Faustina', serif;
--MAINBOX_WIDTH: 30em;
}
input[type="text"] {
font-family: 'Faustina', serif;
font-size: 32px;
border-color: #2a5999;
border-width: 0 0 0.1em 0;
}
input[type="text"]:focus {
outline: none;
}
input#nameinput {
width: 100%;
}
section#hintbox {
background-color: var(--C_BG2);
margin: 0.2em 0.5em;
color: var(--C_TER);
font-size: 24px;
padding: 0.5em 0;
}
span.hit {
display: block;
position: static;
padding: 0.2em 0.5em;
}
span.highlight {
font-weight: bold;
}
section#mainbox {
display: block;
position: absolute;
width: min(var(--MAINBOX_WIDTH), calc(100vw - 1em));
}