Added fetch request in react for projects

This commit is contained in:
Eljakim Herrewijnen 2022-12-29 00:32:13 +01:00
parent 4ef64237de
commit c34e1b0725
6 changed files with 72 additions and 37 deletions

View File

@ -0,0 +1,28 @@
# Generated by Django 4.1.4 on 2022-12-28 18:57
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('project', '0001_initial'),
]
operations = [
migrations.AlterField(
model_name='project',
name='image',
field=models.ImageField(blank=True, null=True, upload_to=''),
),
migrations.AlterField(
model_name='project',
name='rtd_url',
field=models.CharField(blank=True, max_length=200, null=True),
),
migrations.AlterField(
model_name='project',
name='url',
field=models.CharField(blank=True, max_length=200, null=True),
),
]

View File

@ -5,9 +5,9 @@ class Project(models.Model):
title = models.CharField(max_length=100)
description = models.TextField(default="No description added")
status = models.IntegerField(default=ProjectStatus.RUNNING)
image = models.ImageField(null=True)
rtd_url = models.CharField(max_length=200, null=True)
url = models.CharField(max_length=200, null=True)
image = models.ImageField(null=True, blank=True)
rtd_url = models.CharField(max_length=200, null=True, blank=True)
url = models.CharField(max_length=200, null=True, blank=True)
visible = models.BooleanField(default=False)
def _str_(self):

View File

@ -4,4 +4,4 @@ from .models import Project
class ProjectSerializer(serializers.ModelSerializer):
class Meta:
model = Project
fields = ('id' ,'title', 'description', 'status')
fields = ('id' ,'title', 'description', 'status', 'image', 'rtd_url', 'url')

View File

@ -5,4 +5,4 @@ from .models import Project
class ProjectView(viewsets.ModelViewSet):
serializer_class = ProjectSerializer
queryset = Project.objects.all()
queryset = Project.objects.all()

View File

@ -1,26 +1,7 @@
import React, { Component } from "react"
import '../static/Projects.css';
const projectItems = [
{
id: 1,
title: "Thelendar",
description: "Stronghold Kingdoms",
completed: 1
},
{
id: 2,
title: "Ghidra Assistant",
description: "Reversing tools for Ghidra",
completed: 0
},
{
id: 3,
title: "Kerk Tallies",
description: "Creating Tally lights for Church",
completed: 0
},
];
class Projects extends Component {
@ -43,21 +24,33 @@ class Projects extends Component {
render() {
return (
<main className="content">
<div className="row">
<div className="col-md-6 col-sm-10 mx-auto p-0">
<div className="card p-3">
<ul className="list-group list-group-flush">
{this.state.projectItems.map(item => (
<div>
<h1>{item.title}</h1>
<span>{item.description}</span>
</div>
))}
</ul>
<div className="projects-grid-container">
{this.state.projectItems.map(item => (
<div className="projects-grid-item">
<h1>{item.title}</h1>
<span>{item.description}</span>
<span>{item.rtd_url}</span>
</div>
</div>
))}
</div>
</main>
// <main className="content">
// <div className="row">
// <div className="col-md-6 col-sm-10 mx-auto p-0">
// <div className="card p-3">
// <ul className="list-group list-group-flush">
// {this.state.projectItems.map(item => (
// <div>
// <h1>{item.title}</h1>
// <span>{item.description}</span>
// <span>{item.rtd_url}</span>
// </div>
// ))}
// </ul>
// </div>
// </div>
// </div>
// </main>
)
}
}

View File

@ -0,0 +1,14 @@
.projects-grid-container {
display: grid;
grid-template-columns: auto;
gap: 1%;
padding: 1%;
margin-top: 70px;
}
.projects-grid-item {
background-color: rgba(255, 255, 255, 0.8);
margin: 1%;
border: 1px solid black;
text-align: center;
}