Option to copy the glink for client
This commit is contained in:
Aravind142857
51
public/css/response.css
Normal file
51
public/css/response.css
Normal file
@@ -0,0 +1,51 @@
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 140px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -75px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.para {
|
||||
display: inline-block;
|
||||
font-family: futura;
|
||||
font-size: large;
|
||||
color: green;
|
||||
}
|
||||
.textbox {
|
||||
font-family: futura;
|
||||
font-size: large;
|
||||
color: green;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -26,4 +26,4 @@
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -1,8 +1,5 @@
|
||||
// const submit = document.getElementById("button");
|
||||
function getRandomGLink() {
|
||||
//
|
||||
return undefined;
|
||||
}
|
||||
|
||||
|
||||
// submit.addEventListener('click', validate);
|
||||
function validate() {
|
||||
@@ -49,8 +46,6 @@ function getRandomGLink() {
|
||||
var result = window.confirm("You have left the glink field blank. A random one will be generated for you.");
|
||||
if (result === false) {
|
||||
return false;
|
||||
} else {
|
||||
glinkStr = getRandomGLink();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
14
public/src/response.js
Normal file
14
public/src/response.js
Normal file
@@ -0,0 +1,14 @@
|
||||
function myFunction() {
|
||||
var copyText = document.getElementById("myInput");
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 99999);
|
||||
navigator.clipboard.writeText(copyText.value);
|
||||
|
||||
var tooltip = document.getElementById("myTooltip");
|
||||
tooltip.innerHTML = "Copied: " + copyText.value;
|
||||
}
|
||||
|
||||
function outFunc() {
|
||||
var tooltip = document.getElementById("myTooltip");
|
||||
tooltip.innerHTML = "Copy to clipboard";
|
||||
}
|
||||
92
result.js
92
result.js
@@ -20,13 +20,46 @@ app.use(bodyParser.urlencoded({
|
||||
}));
|
||||
app.use(express.static(staticPath));
|
||||
|
||||
const GLINK_SIZE = 6;
|
||||
function getRandomGLink() {
|
||||
let glink = "";
|
||||
glink = newString(GLINK_SIZE);
|
||||
//console.log(glink);
|
||||
validateLink(glink);
|
||||
return glink;
|
||||
}
|
||||
function validateLink(glink) {
|
||||
let qry = "SELECT id FROM data WHERE glink = ? allow filtering";
|
||||
client.execute(qry, [glink], {}, (err, result) => {
|
||||
if(err) {
|
||||
console.log(err.message);
|
||||
glink = null;
|
||||
}
|
||||
if (result.rows.length === 0) {
|
||||
console.log("Done");
|
||||
} else {
|
||||
console.log(glink);
|
||||
glink = getRandomGLink();
|
||||
}
|
||||
});
|
||||
return glink;
|
||||
}
|
||||
function newString(n) {
|
||||
let str = "";
|
||||
let symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
|
||||
for (let i = 0; i < n; i ++) {
|
||||
str += symbols.charAt(Math.floor(Math.random() * 52));
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
function nextId() {
|
||||
let next = id;
|
||||
id = id + 1;
|
||||
return next;
|
||||
}
|
||||
function filter(path) {
|
||||
if (path.match(new RegExp("^/[a-zA-Z]+/$"))) {
|
||||
if (path.match(new RegExp("^/[a-zA-Z]+/*$"))) {
|
||||
if (path.charAt(0) === '/') {
|
||||
path = path.substring(1);
|
||||
}
|
||||
@@ -57,22 +90,46 @@ const query = "INSERT INTO data (id, url, glink) VALUES (?, ?, ?)";
|
||||
app.post('/add', function(req, res) {
|
||||
let input_url = req.body.url;
|
||||
let input_glink = req.body.glink;
|
||||
console.log("Received query " + input_url + " and " + input_glink)
|
||||
console.log("Received query " + input_url + " and " + input_glink);
|
||||
let currID = nextId();
|
||||
let selectQuery = "SELECT id FROM data where glink = ? allow filtering";
|
||||
client.execute(selectQuery, [input_glink],{} ,function(err, result) {
|
||||
if (result.rows.length === 0) {
|
||||
client.execute(query, [currID, input_url, input_glink], {prepare: true}, function(err,result) {
|
||||
if (err) {
|
||||
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:red;\">{err.message}</p></body></html>");
|
||||
} else {
|
||||
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:green;\">New entry has been added with url = " + req.body.url + " and glink = " + req.body.glink + "</p></body></html>");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
res.send("<html><body><p style=\"font-family:futura; font-size:large; color:red;\">This glink has already been registered. Please try a different glink</p></body></html>");
|
||||
}
|
||||
});
|
||||
if (input_glink === "") {
|
||||
input_glink = getRandomGLink();
|
||||
client.execute(query, [currID, input_url, input_glink], {prepare: true}, function(err,result) {
|
||||
if (err) {
|
||||
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:red;\">" + err.message + "</p></body></html>");
|
||||
} else {
|
||||
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:green;\">New entry has been added with url = " + req.body.url + " and glink = " + input_glink + "</p></body></html>");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
let selectQuery = "SELECT id FROM data where glink = ? allow filtering";
|
||||
client.execute(selectQuery, [input_glink],{} ,function(err, result) {
|
||||
if (result.rows.length === 0) {
|
||||
client.execute(query, [currID, input_url, input_glink], {prepare: true}, function(err,result) {
|
||||
if (err) {
|
||||
res.send("<html><body><p style=\"font-family:Futura; font-size:large; color:red;\">{err.message}</p></body></html>");
|
||||
} else {
|
||||
res.send("<html><head><link rel=\"stylesheet\" href=\"./css/response.css\"></head>" +
|
||||
"<body><p class=\"para\">" +
|
||||
"New entry has been added with url = " + req.body.url + " and glink = " /*+ req.body.glink*/ + "" +
|
||||
"</p>" +
|
||||
"<input type=\"text\" value=\"" + req.body.glink + "\" readOnly=\"true\" id=\"myInput\" class=\"textbox\">" +
|
||||
"<div class=\"tooltip\">" +
|
||||
"<button onClick=\"myFunction()\" onMouseOut=\"outFunc()\">" +
|
||||
"<span class=\"tooltiptext\" id=\"myTooltip\">Copy to clipboard</span>" +
|
||||
"Copy text" +
|
||||
"</button>" +
|
||||
"</div>" +
|
||||
"<script src=\"./src/response.js\"></script>" +
|
||||
"</body></html>");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
res.send("<html><body><p style=\"font-family:futura; font-size:large; color:red;\">This glink has already been registered. Please try a different glink</p></body></html>");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
/* Redirect requests to corresponding entry in database */
|
||||
@@ -102,4 +159,5 @@ app.get('/*', (request, response) => {
|
||||
app.listen(port, function(){
|
||||
console.log("server listening on port 63342");
|
||||
})
|
||||
/** Validate url and glink on client side as well */
|
||||
/** Validate url and glink on client side as well */
|
||||
/** Put the glink in a span or label and make it copyable */
|
||||
Reference in New Issue
Block a user