Skip to content

Commit 1bd1c38

Browse files
danielvikidanielviki
committed
update that makes the web works
1 parent 65e1811 commit 1bd1c38

File tree

5 files changed

+95
-25
lines changed

5 files changed

+95
-25
lines changed

‎backend/app.py

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,25 @@
33
import sys
44
import os
55

6-
# Add the parent directory to Python path to import playground
7-
sys.path.append(os.path.dirname(os.path.dirname(__file__)))
8-
from backend.services.playground import bubble_sort, insertion_sort, selection_sort, quick_sort, merge_sort, shell_sort, heap_sort
6+
# Update the import path
7+
from services.playground import bubble_sort, insertion_sort, selection_sort, quick_sort, merge_sort, shell_sort, heap_sort
98

109
app = Flask(__name__)
11-
CORS(app)
10+
11+
# Configure CORS more permissively
12+
CORS(app, supports_credentials=True)
13+
14+
# Or use specific CORS configuration
15+
CORS(app, resources={
16+
r"/api/*": {
17+
"origins": "*", # Allow all origins
18+
"methods": ["POST", "OPTIONS"],
19+
"allow_headers": ["Content-Type", "Authorization"],
20+
"expose_headers": ["Content-Range", "X-Content-Range"],
21+
"supports_credentials": True,
22+
"max_age": 120 # Cache preflight requests for 2 minutes
23+
}
24+
})
1225

1326
# Global variable to store sorting steps
1427
sorting_steps = []
@@ -72,4 +85,4 @@ def sort():
7285
return jsonify({'error': str(e)}), 500
7386

7487
if __name__ == '__main__':
75-
app.run(debug=True, port=5000)
88+
app.run(debug=True, port=5001)

‎frontend/index.html

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,20 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Sorting Visualizer</title>
7-
<link rel="stylesheet" href="styles.css">
7+
<!-- Update CSS path if using Vue CLI/Vite structure -->
8+
<link rel="stylesheet" href="src/assets/main.css">
9+
<!-- Use specific Vue.js version -->
10+
<script src="https://unpkg.com/vue@3.3.4"></script>
811
</head>
912
<body>
10-
<div class="container">
13+
<div id="app" class="container">
1114
<h1>Sorting Visualizer</h1>
1215

1316
<div class="input-section">
1417
<div class="method-selector">
1518
<label for="sortMethod">Select Sorting Method:</label>
16-
<select id="sortMethod">
19+
<!-- Add id attribute to match label -->
20+
<select v-model="sortMethod" id="sortMethod">
1721
<option value="bubble">Bubble Sort</option>
1822
<option value="insertion">Insertion Sort</option>
1923
<option value="selection">Selection Sort</option>
@@ -27,28 +31,37 @@ <h1>Sorting Visualizer</h1>
2731
<div class="numbers-input">
2832
<label>Enter 5 Numbers:</label>
2933
<div class="input-group">
30-
<input type="number" class="number-input" placeholder="Number 1">
31-
<input type="number" class="number-input" placeholder="Number 2">
32-
<input type="number" class="number-input" placeholder="Number 3">
33-
<input type="number" class="number-input" placeholder="Number 4">
34-
<input type="number" class="number-input" placeholder="Number 5">
34+
<input type="number" v-model="numbers[0]" placeholder="Number 1" class="number-input">
35+
<input type="number" v-model="numbers[1]" placeholder="Number 2" class="number-input">
36+
<input type="number" v-model="numbers[2]" placeholder="Number 3" class="number-input">
37+
<input type="number" v-model="numbers[3]" placeholder="Number 4" class="number-input">
38+
<input type="number" v-model="numbers[4]" placeholder="Number 5" class="number-input">
3539
</div>
3640
</div>
3741

38-
<button id="sortButton">Sort Numbers</button>
42+
<button @click="sortNumbers" :disabled="isLoading">
43+
{{ isLoading ? 'Sorting...' : 'Sort Numbers' }}
44+
</button>
3945
</div>
4046

4147
<div class="output-section">
4248
<div class="steps-container">
4349
<h2>Sorting Steps:</h2>
44-
<div id="sortingSteps" class="steps-list"></div>
50+
<div class="steps-list">
51+
<div v-for="(step, index) in sortingSteps"
52+
:key="index"
53+
class="step-item">
54+
Step {{ index + 1 }}: {{ step }}
55+
</div>
56+
</div>
4557
</div>
4658
<div class="result-container">
4759
<h2>Final Result:</h2>
48-
<div id="sortingResult" class="result"></div>
60+
<div class="result">{{ sortingResult }}</div>
4961
</div>
5062
</div>
5163
</div>
52-
<script src="script.js"></script>
64+
<!-- Update script path if using Vue CLI/Vite structure -->
65+
<script src="src/main.js"></script>
5366
</body>
5467
</html>

‎frontend/src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export default {
8080
isLoading.value = true
8181
8282
// Send request to backend
83-
const response = await fetch('http://localhost:5000/api/sort', {
83+
const response = await fetch('http://localhost:5001/api/sort', {
8484
method: 'POST',
8585
headers: {
8686
'Content-Type': 'application/json',

‎frontend/src/main.js

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,51 @@
1-
import { createApp } from 'vue'
2-
import App from './App.vue'
3-
import './assets/main.css'
1+
const { createApp } = Vue
42

5-
// Mount Vue app
6-
const app = createApp(App)
7-
app.mount('#app')
3+
const app = createApp({
4+
data() {
5+
return {
6+
sortMethod: 'bubble',
7+
numbers: ['', '', '', '', ''],
8+
sortingSteps: [],
9+
sortingResult: '',
10+
isLoading: false
11+
}
12+
},
13+
methods: {
14+
async sortNumbers() {
15+
if (this.numbers.some(n => n === '')) {
16+
alert('Please enter all numbers');
17+
return;
18+
}
19+
20+
try {
21+
this.isLoading = true;
22+
const response = await fetch('http://localhost:5001/api/sort', {
23+
method: 'POST',
24+
headers: {
25+
'Content-Type': 'application/json',
26+
'Accept': 'application/json'
27+
},
28+
credentials: 'include', // Include credentials
29+
mode: 'cors', // Explicitly set CORS mode
30+
body: JSON.stringify({
31+
method: this.sortMethod,
32+
numbers: this.numbers.map(n => parseInt(n))
33+
})
34+
});
35+
36+
if (!response.ok) {
37+
throw new Error(`HTTP error! status: ${response.status}`);
38+
}
39+
40+
const data = await response.json();
41+
this.sortingSteps = data.steps;
42+
this.sortingResult = `[${data.sorted.join(', ')}]`;
43+
} catch (error) {
44+
console.error('Error:', error);
45+
this.sortingResult = `Error: ${error.message}`;
46+
} finally {
47+
this.isLoading = false;
48+
}
49+
}
50+
}
51+
}).mount('#app')

‎frontend/vite.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default defineConfig({
77
port: 5173,
88
proxy: {
99
'/api': {
10-
target: 'http://localhost:5000',
10+
target: 'http://localhost:5001',
1111
changeOrigin: true,
1212
}
1313
}

0 commit comments

Comments
 (0)