Merge pull request #9 from ls1intum/3-problem-statement

Display Problem Statement in iframe

scorpio-web/media/reset.css

@@ -0,0 +1,30 @@
+html {
+	box-sizing: border-box;
+	font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+	margin: 0;
+	padding: 0;
+	font-weight: normal;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}

scorpio-web/media/vscode.css

@@ -0,0 +1,91 @@
+:root {
+	--container-padding: 20px;
+	--input-padding-vertical: 6px;
+	--input-padding-horizontal: 4px;
+	--input-margin-vertical: 4px;
+	--input-margin-horizontal: 0;
+}
+
+body {
+	padding: 0 var(--container-padding);
+	color: var(--vscode-foreground);
+	font-size: var(--vscode-font-size);
+	font-weight: var(--vscode-font-weight);
+	font-family: var(--vscode-font-family);
+	background-color: var(--vscode-editor-background);
+}
+
+ol,
+ul {
+	padding-left: var(--container-padding);
+}
+
+body > *,
+form > * {
+	margin-block-start: var(--input-margin-vertical);
+	margin-block-end: var(--input-margin-vertical);
+}
+
+*:focus {
+	outline-color: var(--vscode-focusBorder) !important;
+}
+
+a {
+	color: var(--vscode-textLink-foreground);
+}
+
+a:hover,
+a:active {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+code {
+	font-size: var(--vscode-editor-font-size);
+	font-family: var(--vscode-editor-font-family);
+}
+
+button {
+	border: none;
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	width: 100%;
+	text-align: center;
+	outline: 1px solid transparent;
+	outline-offset: 2px !important;
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button:hover {
+	cursor: pointer;
+	background: var(--vscode-button-hoverBackground);
+}
+
+button:focus {
+	outline-color: var(--vscode-focusBorder);
+}
+
+button.secondary {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}
+
+button.secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+input:not([type='checkbox']),
+textarea {
+	display: block;
+	width: 100%;
+	border: none;
+	font-family: var(--vscode-font-family);
+	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
+	color: var(--vscode-input-foreground);
+	outline-color: var(--vscode-input-border);
+	background-color: var(--vscode-input-background);
+}
+
+input::placeholder,
+textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground);
+}

scorpio-web/package.json

@@ -21,6 +21,12 @@
           "editPresentation": "singlelineText",
           "default": "http://localhost:8080"
         },
+        "scorpio.clientBaseUrl": {
+          "description": "The URL of the Artemis Client",
+          "type": "string",
+          "editPresentation": "singlelineText",
+          "default": "http://localhost:9000"
+        },
         "scorpio.userData.username": {
           "description": "The username for login to Artemis",
           "editPresentation": "singlelineText",

scorpio-web/src/web/authentication/authentication.ts

@@ -1,14 +1,14 @@
 import * as vscode from 'vscode';
-import { settings_user, settings_password} from '../config';
+import { settings} from '../config';
 import { authenticateCookie, authenticateToken } from './authentication_api';
 
 export var token:string;
 
 export async function authenticateCookieCmd(){
 		vscode.window.showInformationMessage('Start Cookie Authentication');
 
-		const username = await vscode.window.showInputBox({ value: settings_user, prompt: 'Enter Username'});
-		const password = await vscode.window.showInputBox({ value: settings_password, prompt: 'Enter Password', password: true });
+		const username = await vscode.window.showInputBox({ value: settings.user, prompt: 'Enter Username'});
+		const password = await vscode.window.showInputBox({ value: settings.password, prompt: 'Enter Password', password: true });
 
 		try{
 			console.log(`authenticate with ${username}, ${password}`);
@@ -22,8 +22,8 @@ export async function authenticateCookieCmd(){
 
 export async function authenticateTokenCmd(){
 		vscode.window.showInformationMessage('Start Token Authentication');
-		const username = await vscode.window.showInputBox({ value: settings_user, prompt: 'Enter Username'});
-		const password = await vscode.window.showInputBox({ value: settings_password, prompt: 'Enter Password', password: true });
+		const username = await vscode.window.showInputBox({ value: settings.user, prompt: 'Enter Username'});
+		const password = await vscode.window.showInputBox({ value: settings.password, prompt: 'Enter Password', password: true });
 
 
 		try{
@@ -34,4 +34,11 @@ export async function authenticateTokenCmd(){
 			vscode.window.showErrorMessage(`error: ${e}`);
 			return;
 		}
+}
+
+export function isTokenValid(): boolean{
+	if (token === undefined) return false;
+	// TODO check to Artemis if token is not experied yet
+
+	return true;
 }

scorpio-web/src/web/authentication/authentication_api.ts

@@ -1,11 +1,11 @@
-import { settings_base_url } from "../config";
+import { settings } from "../config";
 
 export async function authenticateCookie(username: string | undefined, password: string | undefined) {
 	if (!username || !password) {
 		throw new Error('Username and Password are required');
 	}
 
-	const url = `${settings_base_url}/api/public/authenticate`;
+	const url = `${settings.base_url}/api/public/authenticate`;
 
 	const response = await fetch(url, {
 		method: "POST",
@@ -31,7 +31,7 @@ export async function authenticateToken(username: string | undefined, password:
 		throw new Error('Username and Password are required');
 	}
 
-	const url = `${settings_base_url}/api/public/authenticate/token`;
+	const url = `${settings.base_url}/api/public/authenticate/token`;
 
 	const response = await fetch(url, {
 		method: "POST",

scorpio-web/src/web/config.ts

@@ -1,5 +1,16 @@
 import * as vscode from 'vscode';
 
-export const settings_base_url: string | undefined= vscode.workspace.getConfiguration('scorpio').get('apiBaseUrl');
-export const settings_user: string | undefined = vscode.workspace.getConfiguration('scorpio').get('userData.username');
-export const settings_password: string | undefined = vscode.workspace.getConfiguration('scorpio').get('userData.password');
+type Settings = {
+    base_url: string | undefined,
+    client_url: string | undefined,
+    user: string | undefined,
+    password: string | undefined
+
+}
+export const settings: Settings = {
+    base_url: vscode.workspace.getConfiguration('scorpio').get('apiBaseUrl'),
+    client_url: vscode.workspace.getConfiguration('scorpio').get('clientBaseUrl'),
+    user: vscode.workspace.getConfiguration('scorpio').get('userData.username'),
+    password: vscode.workspace.getConfiguration('scorpio').get('userData.password')
+}
+

scorpio-web/src/web/course/course.ts

@@ -0,0 +1,27 @@
+import * as vscode from 'vscode';
+import { fetch_courses } from "./course_api";
+import { Course } from './course_model';
+
+export type CourseOption = {
+    label: string;
+    description: string;
+    course: Course;
+};
+
+export async function build_course_options() {
+    let courses;
+    try {
+        courses = await fetch_courses();
+    } catch (e) {
+        vscode.window.showErrorMessage(`error: ${e}`);
+        return;
+    }
+
+    const courseOptions: CourseOption[] = courses.map(course => ({
+        label: course.title, // Adjust based on your data structure
+        description: course.description, // Adjust based on your data structure
+        course: course, // Use a unique identifier
+    }));
+
+    return courseOptions;
+}

scorpio-web/src/web/course/course_api.ts

@@ -1,16 +1,9 @@
 import { token } from "../authentication/authentication";
-import { settings_base_url } from "../config";
-
-
-type Course = {
-    id: string;
-    title: string;
-    description: string;
-    shortName: string;
-}
+import { settings } from "../config";
+import { Course } from "./course_model";
 
 export async function  fetch_courses(): Promise<Course[]> {
-	const url = `${settings_base_url}/api/courses`;
+	const url = `${settings.base_url}/api/courses`;
 
     console.log("fetching courses");
 	  const response = await fetch(url, {

scorpio-web/src/web/course/course_model.ts

@@ -0,0 +1,6 @@
+export type Course = {
+    id: string;
+    title: string;
+    description: string;
+    shortName: string;
+}

scorpio-web/src/web/exercise/exercise.ts

@@ -0,0 +1,41 @@
+import * as vscode from 'vscode';
+import { fetch_exercise } from './exercise_api';
+import { CourseOption } from '../course/course';
+import { set_current } from '../shared_model';
+
+export async function build_exercise_options(courseOptions: CourseOption[] | undefined) {
+    if (!courseOptions) {
+        return;
+    }
+
+    const selectedCourse = await vscode.window.showQuickPick(courseOptions, {
+        placeHolder: 'Select an item',
+    });
+    if (!selectedCourse) {
+        vscode.window.showErrorMessage('No course was selected');
+        return;
+    }
+
+    let exercises;
+    try {
+        exercises = await fetch_exercise(selectedCourse.course.id);
+    } catch (e) {
+        vscode.window.showErrorMessage(`error: ${e}`);
+        return;
+    }
+    const exerciseOptions = exercises.map(exercise => ({
+        label: exercise.title, // Adjust based on your data structure
+        description: "", // Adjust based on your data structure
+        exercise: exercise, // Use a unique identifier
+    }));
+    const selectedExercise = await vscode.window.showQuickPick(exerciseOptions, {
+        placeHolder: 'Select an item',
+    });
+    if (!selectedExercise) {
+        vscode.window.showErrorMessage('No exercise was selected');
+        return;
+    }
+
+    // set current course here so that if an error occurs before the previous exercise and course are still set
+    set_current(selectedCourse.course, selectedExercise.exercise);
+}

scorpio-web/src/web/exercise/exercise_api.ts

@@ -1,16 +1,9 @@
 import { token } from "../authentication/authentication";
-import { settings_base_url } from "../config";
-
-type Exercise = {
-    type: string,
-    id: number,
-    title: string,
-    shortName: string
-    problemStatement: string,
-}
+import { settings } from "../config";
+import { Exercise } from "./exercise_model";
 
 export async function fetch_exercise(courseId: string): Promise<Exercise[]>{
-	const url = `${settings_base_url}/api/courses/${courseId}/programming-exercises`;
+	const url = `${settings.base_url}/api/courses/${courseId}/programming-exercises`;
 
     console.log("fetching exercises");
     const response = await fetch(url, {
@@ -29,4 +22,26 @@ export async function fetch_exercise(courseId: string): Promise<Exercise[]>{
 
     console.log(`retrieved exercises successful ${data}`);
     return data as Exercise[];
+}
+
+export async function fetch_problem_statement(courseId: string, exerciseId: string){
+	const url = `${settings.base_url}/api/courses/${courseId}/exercises/${exerciseId}/problem-statement`;
+
+    console.log("fetching problem statement");
+    const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`
+        },
+    })
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status} message: ${response.text}`);
+    }
+
+    const data = await response.text();
+
+    console.log(`retrieved exercises successful ${data}`);
+    return data;
 }

scorpio-web/src/web/exercise/exercise_model.ts

@@ -0,0 +1,7 @@
+export type Exercise = {
+    type: string,
+    id: number,
+    title: string,
+    shortName: string
+    problemStatement: string
+}