The second convoy operations - to achieve distal collapsible tree

First, open the portal

1. blog address:
teammate (Lee shared) blog address: https://www.cnblogs.com/lx2509/

The job blog: https://edu.cnblogs.com/campus/fzu/2019FZUSEZ/homework/8736

2.GitHub address
https://github.com/lx509/031702509-031702535

Second, the specific division of labor

Lee enjoy: writing code, testing, UI design
Shen Yi-huang: alternative, a new version of the update, blog writing

Three, PSP form

PSP2.1	Personal Software Process Stages	Estimated time consuming (min)	The actual consuming (min)
Planning	plan	30	30
Estimate	Estimate how much time this task requires	60	60
Development	Develop	2160	2880
Analysis	Needs analysis (including learning new technologies)	600	720
Design Spec	Generate design documents	60	40
Design Review	Design Review	30	30
Coding Standard	Code specifications (development of appropriate norms for the development)	10	10
Design	Specific design	60	60
Coding	Specific coding	720	900
Code Review	Code Review	60	30
Test	Test (self-test, modify, commit the changes)	120	180
Reporting	report	60	60
Test Report	testing report	20	20
Size Measurement	Computing workload	10	10
Postmortem & Process Improvement Plan	Hindsight and propose process improvement plan	10	10
	total	1850	2100

Fourth, the design and implementation of problem-solving ideas description and explanation

1. Problem-solving ideas

Spanning Tree uses jQuery ~

Code organization and internal implementation design (class diagram)

due to the code we are basically anonymous functions and structure, can not be written in a specific method name, so something like this.

The key and key algorithm to achieve a partial flowchart of
a key part of the algorithm 1. The
input data split processing, according to the connection logic output node supervisor now, the rest of the students are then judged node connected to node tutor.
·
2. flowchart
General Scheme:

processing node flowchart tutor:

Other flowchart of processing nodes:

·
3. The key codes and explanations

//将文本框输入转化为数组（利用split()方法和正则表达式分割，存入ss[]数组）

var s =document.getElementById("text1").value;
var reg = new RegExp("导师：","g");
s.replace(reg,"导师：/");
var reg = new RegExp("级博士生：","g");
s.replace(reg,"级博士生：/");
var reg = new RegExp("级硕士生：","g");
s.replace(reg,"级硕士生：/");
var reg = new RegExp("级本科生：","g");
s.replace(reg,"级本科生：/");
var reg = new RegExp(" ","g");
s.replace(reg,"");
var length=s.length;
if (s[length-1].match(/\n|\r/g))
alert("文本末不能有空行！");
var reg = /\n(\n)*( )*(\n)*\n/g;
s = s.replace(reg,"\n");
var ss = s.split(/、|\n|\r|：|\t|\ +/g); 

//处理导师节点（如果ss[i]=="导师"，利用html的列表，往列表不断添加节点，分为第一次添加导师节点和不是第一次添加导师节点的情况）
if(i==0){
    if(ss[i]=="导师"){
        $("#Tree").html('<li id="id4'+num4+'"><span  id="id5'+num5+'" class="badge badge-success"> 导师</span></li>');
        num4++;
        i++;
        $('#id5'+num5).after('<ul><li id="tc'+tc+'"><span id="teacher"> '+ss[i]+'</span></li></u1>');
        num5++;
    }
    else{
    break;
    } 
    console.log(ss[i]);
}
else{
    if(ss[i]=="导师"){
    $('#id4'+(num4-1)).after('<li id="id4'+num4+'"><span  id="id5'+num5+'" class="badge badge-success"> 导师</span></li>');
    num4++;
    i++;
    $('#id5'+num5).after('<ul><li id="tc'+tc+'"><span id="teacher"> '+ss[i]+'</span></li></u1>');
    num5++;
    }
    else{
        break;
    } 
    console.log(ss[i]);
}

//处理其他关键词节点（如果ss[i]关键词为“级博士生”、“级硕士生”、“级本科生”，利用html的列表，往列表不断添加节点）
if(ss[i].match(/(([0-9]+)级博士生)|(([0-9]+)级硕士生)|(([0-9]+)级本科生)/)){
    $('#tc'+tc).after('<li><span id="id'+num1+'" class="badge badge-success"> </span></li>');

    $('#id'+num1).html(ss[i]);
    console.log(ss[i]);
    i++;
    var j=1;
    for(;i<ss.length;i++){
        console.log(ss[i]);
        if(ss[i].match(/(([0-9]+)级博士生)|(([0-9]+)级硕士生)|(([0-9]+)级本科生)|导师/)){
            i--;
            break;
        }
        if(j==1){
            $('#id'+num1).after('<ul><li id="id3'+num3+'"><span id="id2'+num2+'"> </span></li></u1>');
            j++;
        }
        else{
            $('#id3'+(num3-1)).after('<li id="id3'+num3+'"><span id="id2'+num2+'"> </span></li>');
        }
        $('#id2'+num2).html(ss[i]);
        num2=num2+1;
        num3=num3+1;
        console.log(ss[i]);
    }  
        num1=num1+1;
}
else{
    break;
}

//折叠处理
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');

    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
    
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
            } 
        else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
            e.stopPropagation();
    });
        
});

Five additional design and display features

1. The unique design creativity, sense designed
to support multiple sets of data simultaneously input, the coexistence of multiple trees;
data from each generated input tree may cover the last input the generated tree, without subsequent testing and use in repeatedly refresh;
interface landscaping;

2. The idea to realize
all the input data, splits on tutor, doctoral stage XX, XX-level master, XX undergraduate students and instructors to identify the node, then identifying the node tutor students and the subsequent generation.
Download font resources, PS and other background, and calls css / bootstrap.min.css and css / style.css CSS pages were landscaping.

3. Achievements Exhibition
Successfully demonstrated

Sixth, catalog descriptions and instructions for use

Seven, unit testing

1. Test Tool: Mocha
learning website: http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
tutorial:
1, into the git directory in the file to be tested
2, under the premise of the installation Node run the command:
cd Mocha-the Demos (example image links: https://i.niupic.com/images/2019/10/18/_1220.png )
npm install (image link example: HTTPS : //i.niupic.com/images/2019/10/18/_1221.png )
3, a comprehensive installation environment:
npm install --global Mocha (sample pictures link: https://i.niupic.com/images/ 2019/10/18 / _1222.png
)
4, install assertion library Chai:
npm install Chai (example image links: https://i.niupic.com/images/2019/10/18/_1223.png )
5, running test file:
Mocha test.js (example image links: https://i.niupic.com/images/2019/10/18/_1224.png )
Test methods, see the documents prepared by learning website

Part of the test code and test results
(1) a single set of inputs

(2) a single set of input keywords order transposing

(3) a single set of input, other than the lack of a supervisor key

(4) a single set of input, only the supervisor node

( 5) The two inputs

(6) three groups of inputs, each input varies

(7) three groups of inputs, each input line number is not the same in each group

(8) is not input to tutor the beginning

(9) the end of the input text empty lines

The idea of constructing a test data

Considering the single set of input and multiple sets of input, so the relevant test data structure;
Taking into account the different mentor students, may contain more than one category, it may only a single class of students, so the structure of the relevant test data;
Taking into account the user is not necessarily in order of the input data when the input data, the data structure;
Taking into account the user when entering data might have finished entering data by pressing the Enter key will naturally last group, so do reminders;

Eight, Github code check-in records

Nine, code modules being experienced difficulties or knot and solutions

Problem Description:
1, can not handle text box to make it a data tree node
did what to try: 1, 2 access to information, to think hard about
whether to resolve: is
what harvest: In the beginning no idea, trying to turn json data files turn, and he had to give up. Finally, split () method and the regular expression to force kick.
2, the second tree when running multiple tree nodes will become part of the first tree's
done what to try: 1, followed by the use of sample code analysis again 2, using the debug console
is resolved: is
what Harvest: the console is actually pretty good, debug artifact!
3, how to form an association tree
did what to try: 1, 2 access to information, to think hard about
whether to address: No
What harvest: the lack of time to think of life-saving ah!

Ten, evaluate your teammates

· Place worth learning
really is a super reliable partner, learning ability, patience, feeling a little dragging her hind legs, and must be a lot to learn from her.
· Areas for improvement
shine, yet found!

Software Engineering Fifth jobs - convoy Programming