Ide editor added

Author: drcoolsanjeev

codecamp-front/.angular-cli.json

@@ -26,7 +26,11 @@
 
         "../node_modules/popper.js/dist/umd/popper.min.js",
         "../node_modules/jquery/dist/jquery.min.js",
-        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
+        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
+        "../node_modules/ace-builds/src-min/ace.js",
+        "../node_modules/ace-builds/src-min/mode-c_cpp.js",
+        "../node_modules/ace-builds/src-min/mode-python.js",
+        "../node_modules/ace-builds/src-min/mode-java.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

codecamp-front/package-lock.json

@@ -27,6 +27,7 @@
     "bootstrap": "^4.0.0-beta.2",
     "core-js": "^2.4.1",
     "jquery": "^3.3.1",
+    "ng2-ace-editor": "^0.3.4",
     "popper.js": "^1.12.9",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"

codecamp-front/package.json

@@ -4,7 +4,7 @@ import { RouterModule, Routes} from '@angular/router';
 import { ReactiveFormsModule} from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import {FormControl, FormGroup} from '@angular/forms';
-
+import {AceEditorModule} from 'ng2-ace-editor';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/navbar/navbar.component';
 import { LoginComponent } from './components/login/login.component';
@@ -41,7 +41,8 @@ import { ProblemsComponent } from './components/problems/problems.component';
     BrowserModule,
     HttpModule,
     ReactiveFormsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    AceEditorModule
   ],
   providers: [ AuthService],
   bootstrap: [AppComponent]

codecamp-front/src/app/app.module.ts

@@ -2,7 +2,23 @@
     <div class="row">
         <div class="col-md-12">
             <h1 class="display-4">Online IDE</h1>
-            <textarea name="" id="" cols="105" rows="28" ></textarea>  
+            <article>
+              <h5>Select language</h5>
+              <select (change)="selectLanguage($event)">
+                <option value="c_cpp">C</option>
+                <option value="c_cpp">C++</option>
+                <option value="java">Java</option>
+                <option value="python">Python</option>
+              </select>
+            </article>
+
+            <div ace-editor id="" cols="105" rows="28"
+                 [text]="content"
+                 class="aceEditorDirective"
+                 mode="{{selectedLanguage}}"
+                 style="height:500px;"></div>
+
+
             <div class="row">
             <div class="col-md-8">
                 <label class="file-upload">Upload File
@@ -18,7 +34,7 @@ <h1 class="display-4">Online IDE</h1>
                               Check me out
                             </label>
                           </div>
-                    
+
                 </div>
             </div>
             </div>

codecamp-front/src/app/components/ide/ide.component.html

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'app-ide',
@@ -7,7 +7,51 @@ import { Component, OnInit } from '@angular/core';
 })
 export class IdeComponent implements OnInit {
 
-  constructor() { }
+
+  selectedLanguage: String  =  'c_cpp';
+  content: string;
+  selectLanguage(event: any) {
+    this.selectedLanguage = event.target.value;
+    if(this.selectedLanguage === 'c_cpp') { this.content =
+`#include<stdio.h>
+
+int main()
+{
+
+   printf("Welcome To CodeCamp");
+
+}
+`} else if(this.selectedLanguage === 'java'){this.content =
+`import java.util.*;
+
+public class CodeCamp {
+
+   public static void main(String[] args) {
+
+       System.out.println("Welcome To Code Camp");
+
+   }
+
+}
+`
+      } else {
+      this.content = `print("Welcome To CodeCamp")`
+      }
+
+  }
+
+  constructor() {
+    this.content =
+`#include<stdio.h>
+
+int main()
+{
+
+  printf("Welcome To CodeCamp");
+
+}
+`
+   }
 
   ngOnInit() {
   }