SQlite : How to add/edit the poll on Glitch template

Hello dear Glitch users !

So I just started using SQlite Glitch template,

Here is the problem I’m facing :

How to edit/add the initial poll ? I don’t found the datas “languages” on any files to edit (HTML, JavaScript and CSS).

What I need is delete this question, and adding instead a basic field like “Drop your message”, so it’s a short text field.

I’ve tried somethings, but results isn’t saved on the admin tab.

Looking for your helps please !

1 Like

Hi there! So the SQL commands all happen in src/sqlite.js. To update the text on the page, edit src/pages/index.hbs for the main form and src/pages/admin.hbs for the admin page that shows the data so far.

Now, if you’re editing the form questions, you’ll need to make sure servers.js is updated to receive the same params the form is sending so it can then do the queries you updated in src/sqlite.js. I hope this steers you in the right direction, I understand it’s a lot!

1 Like

So,

Note : Honestly, I already understood what you are saying there is no relevant information in your post. Your explanation is not really helpful to the community. I think a very simple tutorial here can help many Glitch users. Moreover I found the old version (with the dreams to be added) more relevant and better built, but it does not save the data.

Here’s what I produced (just belox) and what I was able to do, my edits didn’t fix the problem, but I’m sharing it so you can tell me what’s wrong and help the community.

MY WORKS :

Step 1 : I’ve started by edit the src/pages/index.hbs :

I’ve deleted this code :

{{#each optionNames}}
  <input type="radio" id="{{this}}" name="language" value="{{this}}" required />
  <label for="{{this}}">{{this}}</label>
{{/each}}

And replaced with this instead :

<label for="textInput">Enter your text here:</label>
<input type="text" id="textInput" name="textInput" required />

Here is what I got :

Step 2 : Then I got to src/pages/admin.hbs in order to delete the column 1 related to past language selected, and adding instead a column to show the text submitted in my new field :

Current code :

<tr>
  <th>Option Name</th>
  <th>Timestamp</th>
</tr>
{{#each optionHistory}}
  <tr>
    <td>{{choice}}</td>
    <td>{{time}}</td>
  </tr>
{{/each}}

New code :

<tr>
  <th>Text Input</th>
  <th>Timestamp</th>
</tr>
{{#each optionHistory}}
  <tr>
    <td>{{textInput}}</td>
    <td>{{time}}</td>
  </tr>
{{/each}}

Here is what I got :

Step 3 : Adding servers.js settings.

Here is the code I’ve added:

let textHistory = [];
fastify.post('/', function(req, res) {
  let text = req.body.textInput;
  textHistory.unshift({textInput: text, time: new Date()});
  res.render('admin', {textHistory: textHistory});
});
fastify.get('/admin', function(req, res) {
  res.render('admin', {textHistory: textHistory});
});

From this moment, please note that I got this face status :
Capture d’écran 2023-01-23 à 23.12.04

Step 4 : Edit sqlite.js (please note I’ve added my code from the line 28)

Here is the code I’ve added :

//We add a new table for text input
try {
    await db.run(
        "CREATE TABLE TextInput (id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT, time TIMESTAMP)"
    );
    } catch (dbError) {
        console.error(dbError);
    }

// Add method to process the text input
processText: async text => {
    try {
        // Insert new TextInput table entry indicating the user input and timestamp
        await db.run("INSERT INTO TextInput (text, time) VALUES (?, ?)", [text, new Date().toISOString()]);
        return await db.all("SELECT * from TextInput");
    } catch (dbError) {
        console.error(dbError);
    }
},

// Add method to get the logs for text input
getTextLogs: async () => {
    try {
        return await db.all("SELECT * from TextInput");
    } catch (dbError) {
        console.error(dbError);
    }
},

Step 5 : Now, go back to the server.js

Here is the code I need to add to add the 2 new methods :

app.post('/', function(req, res) {
  let text = req.body.textInput;
  db.processText(text);
  res.render('admin', {textHistory: textHistory});
});

app.get('/admin', function(req, res) {
    textHistory = db.getTextLogs();
    res.render('admin', {textHistory: textHistory});
});

Now, my site show this error message :

About :

:arrow_right: Here you can play with my current build, with the code I’ve added :

:arrow_right: To bring you more visibility of the current stage, i’ve created a Git repo here : GitHub - saoecom42/glitch_sqllite

Thanks for your help Sir :grinning:

Please note that I have a Pro Glitch account.

Note : Please note that i’ve already replaced “app.post” by “fastify.post” for example. Error isn’t here.

“Note : Honestly, I already understood what you are saying there is no relevant information in your post. Your explanation is not really helpful to the community.” Point taken I guess, lol, also I’m not a “Sir”.

If you look in the logs of your project, you will see that there’s a syntax error. You’re missing a bracket or something. You can compare your current code to my cleaned up version in a remix of your project (Glitch :・゚✧). Fixing that will lead to logs on some errors you have with duplicate routes on server.js.

Hoping this puts you in the right direction, apologies in advance for not writing an entire tutorial on here - I’ll let the team know that this is something we should consider writing up.

Just started looking at your cleaned up version, is it normal that the frontend didn’t load ?

Yes, because there are more errors in other parts of the code. If you click the “Logs” tab on the bottom of the editor it will tell you what’s happening, or at least where it’s happening.

For topic information purpose here is what I see on my logs tab

So what that’s saying is you have multiple post routes for ‘/’ - the code for the second one is written in server.js on line 99

But If and when I’m deleting this line, I got more erros and my app will not work

You can only have one code .post() and .get() function for each route - this app has two routes, “/” for the front page/index and “/admin” for the admin page. You seem to have multiples of each on that page for each route, so you’d need to delete the entire code block of the ones you aren’t using. By code block, I mean everything from fastify.post(‘/’ to the closing }); part. As you delete, look to the logs to find out where it’s finding issues.

And if you accidentally delete too much, feel free to copy the code from my remix of the original state of your app when I first remixed it!

1 Like